CSS 可见性规则

Question

我尝试在 Google 上搜索此内容，但无济于事。

谁能给我指点一个很好的资源来解释 CSS 的渲染和可见性规则？或者如果它很简单，有人可以在这里写下来吗？

举个例子，假设我有 2 个大 div，DIV_LARGE1，DIV_LARGE2，它们彼此不包含，还有一个小 div，DIV_SMALL。当 DIV_LARGE1 中定义了 DIV_SMALL 时，我可以看到它属于 DIV_LARGE1 的部分，但是与 共享的区域DIV_LARGE2 隐藏在 DIV_LARGE2 下。我在页面呈现后(点击一些)显示 DIV_SMALL(通过设置其 display:inline)，所以 DIV_LARGE2 应该无关紧要> 在 HTML 代码中位于 DIV_LARGE1 之后。

什么优先于什么？由于我的小 div 有 position:relative 而其他两个 div (DIV_LARGE*) 都有 position:absolute，我可以推断绝对定位需要如果未在其中定义 div，则优先于 relative。但这是正确的吗？具体规则是什么？

Answer 1

Phelios 是正确的，您遇到的问题与 z-index 属性有关。这是 SmashingMag 的一篇很棒的文章，详细解释了它:http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/

对于 tl;dr - 定位元素按照它们在 html 代码中的放置顺序堆叠，因此第一个大 div 内的 div_small 默认总是堆叠在第二个大 div“下方”。您可以通过在 css 中设置小 div 的 z-index 属性来解决这个问题。