Why img without position is like "absolute"?

Check this code :

HTML :
<div style="position: absolute; visibility: visible; width: 172px;">
    <img class="inf-image" align="right" src="http://www.ilritaglio.it/wp-content/uploads/2012/02/wee.jpg">

    <div class="inf-content">
        Hello        
    </div>   
</div>
CSS :
.inf-image
{
    position: relative;
    cursor: pointer;
    margin: 3px 8px 0px 0px;  
    width:20px;   
}

.inf-content {
    background-color: #FF0000;
    padding: 10px;
    width: 150px;
    height:50px;
}

looks like the div (which is relative) is under the image (which look absolute). Why? It should push the div over its height.

Answers


Floating elements (like an <img align="right">) offset only the content of block elements, but not their backgrounds, so the red background of the div is seen under the image.


Its all about the CSS stacking context. If you give an element another position than static it will be moved to its own stacking context. From a logical point of view the .inf-image { position: relative; } is no longer a child of the parent DIV or a sibling to .inf-content. What you have now is a DIV with another DIV (the red one) inside. The image itself "hovers" in its own context right below the document root (HTML) and is just positioned relative to that element, which preceded it in the source.

Which is shown above which element can be determined by a combination of position and z-index.

https://developer.mozilla.org/en/Understanding_CSS_z-index

http://reference.sitepoint.com/css/stacking


According to your css and html your div is positioned absolute while your image is positioned relative. This is your problem.

<div style="position: relative; visibility: visible; width: 172px;">
    <img class="inf-image"src="http://www.ilritaglio.it/wp-content/uploads/2012/02/wee.jpg">

    <div class="inf-content">
        Hello        
    </div>   
</div>

.inf-image
{
    position: absolute;
    cursor: pointer;
    margin: 3px 8px 0px 0px;  
    width:20px;
    right:0;
}

.inf-content {
    background-color: #FF0000;
    padding: 10px;
    width: 150px;
    height:50px;
}

Need Your Help

How to get random image from directory using PHP

php

I have one directory called images/tips.