Question

检查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;
}

看起来像div（它是相对的）在图像下面（看起来绝对）。为什么？它应该将div推到它的高度。

Answer 1

浮动元素（如<img align="right">）仅偏移块元素的内容，但不偏移它们的背景，因此在图像下可以看到div的红色背景。

Answer 2

关于CSS堆叠上下文的全部内容。如果您为另一个元素position提供static而不是.inf-image { position: relative; }，则会将其移动到自己的堆叠上下文中。从逻辑的角度来看，DIV不再是父.inf-content的孩子或DIV的兄弟。你现在拥有的是DIV，里面有另一个HTML（红色的）。图像本身“悬停”在文档根目录（position）正下方的自己的上下文中，并且只相对于该元素位于源代码之前的元素。

上面显示的是哪个元素可以通过z-index和{{1}}的组合来确定。

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

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

Answer 3

根据你的css和html，你的div位于绝对位置，而你的图像位于相对位置。这是你的问题。

<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;
}

为什么没有位置的img就像“绝对”？

HTML：

CSS：

3 个答案: