4

私は次のHTMLを持っています:

<div id = "container">
    <div class="block pink float"></div>
    <div class="green block">A</div>
</div>

および次の CSS:

    .block {
        width: 200px;
        height: 200px;
    }

    .float { float: left; }
    .pink { background: #ee3e64; }
    .green { background: green; }

出力に表示されるのは、緑のボックスがピンクの下に隠れていることですか? なぜそうなのですか？Aまた、緑のボックス内に が表示されないのはなぜですか?

ここのコードを参照してください：

http://jsfiddle.net/mazdakiat/cu9Cr/

</p>

4

2 に答える 2

3

要素をフロートすると、通常のフローから外れます。したがって、ピンクを浮かせることで、緑のブロックがその下に滑り込むことができます。ただし、緑のブロックのA内側は異なります。これは子で、ピンクのブロックがそのコンテンツをプッシュします。ピンクのブロックが緑のブロックを完全に覆い、コンテンツを下に押し出したため、下に表示されます。より良い画像については、このフィドルを参照してください。

http://jsfiddle.net/cu9Cr/1/

于 2012-05-23T04:40:13.623 に答える
1

ピンクのボックスをフローティングすると、ドキュメントの流れから外れます。緑のボックスは、ピンクのボックスがまったく存在しなかった場合の場所にスクートします (ただし、要素内のテキストは浮動要素をラップします)。ピンクのボックスが一番上に表示されるのは、どちらのオブジェクトにも z-index 属性が指定されていないため、ブラウザーは HTML で最初に表示される要素を下の要素よりも z-index で高く配置するためです。

[更新] 以下の mrtsherman のコメントによると、位置が相対、絶対、または固定に設定されていない限り、要素に z-index を設定しても効果はありません。

于 2012-05-23T04:40:29.673 に答える