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 に答える