0

检查此代码：

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 推过它的高度。

4

3 回答 3

2

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

于 2012-06-13T15:43:29.503 回答
0

这都是关于 CSS 堆叠上下文的。如果你给一个元素另一个元素，它将被移动到它自己的堆叠上下文中position。static从逻辑的角度来看，.inf-image { position: relative; }不再是父母的孩子DIV或兄弟姐妹.inf-content。你现在拥有的是一个里面DIV有另一个DIV（红色的）。图像本身在其自身上下文中“悬停”在文档根 ( ) 下方，HTML并且仅相对于源中位于它之前的那个元素定位。

上面显示了哪个元素可以通过 和 的组合来position确定z-index。

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

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

于 2012-06-13T15:50:56.040 回答
-1

根据您的 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;
}
于 2012-06-13T15:51:11.113 回答