Question

我有以下HTML:

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

以及以下中央支助系统:

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

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

我从输出中看到的是绿盒隐藏在粉红色之下? 为什么是?为什么绿盒里没有显示A ?

这里的代码是:

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

调

Answer 1

当您浮动一个元素时, 它会使其脱离正常流。因此, 通过浮动粉红色, 您可以让绿块在下面滑动。绿块内 < code> A 的 < code > 是不同的。这是一个孩子, 粉红色块会推动它的内容。它在下面出现, 因为粉红色块已经完全覆盖了绿块, 并且将内容从底部推出来。请看这个小块以获得更好的图片。

http://jsfiddle.net/cu9Cr/1/" rel=“no follow'>http://jsfiddle.net/cu9Cr/1/

Answer 2

粉色盒浮动时, 将它从文档的流中移出。绿色盒然后滑到粉色盒根本不存在的地方( 文字内部元素, 却绕着浮动元素 ) 。粉色盒在顶部显示, 因为两个对象上都没有指定任何z- index 属性, 浏览器会将元素放在z- index中比下面元素高的 html 中。

根据Mortsherman在下文的评论[更新],在任何元素上设定z-index不会产生任何效果,除非其位置设定为相对的、绝对的或固定的。

友情链接