CSS 可见性规则
我尝试在谷歌上搜索这个，但没有成功。
有人能给我指点一个很好的资源来解释 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 未在其内部定义，则优先于相对的。但这是正确的吗？具体规则是什么？
I tried searching for this on Google, but to no avail.
Can someone point me to a good resource that explains the rendering and visibility rules for CSS ? Or if it is very simple, can someone please write it down here ?
To give you an example, let's say that I have 2 large divs, DIV_LARGE1, DIV_LARGE2, that are not contained within each other and a small div, DIV_SMALL. When DIV_SMALL is defined within DIV_LARGE1, I can see that part of it which falls inside DIV_LARGE1, but the area that is shared with DIV_LARGE2 gets hidden beneath DIV_LARGE2. I am displaying DIV_SMALL (by setting its display:inline) after the page has rendered (on some click), so it should not matter that DIV_LARGE2 comes after DIV_LARGE1 in the HTML code.
What takes precedence over what ? Since my smaller div has position:relative and both the other divs (DIV_LARGE*) have position:absolute, I can infer that absolute positioning takes precedence over relative if the div is not defined inside it. But is this correct ? What are the precise rules ?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
Phelios 是正确的，您遇到的问题与 z-index 属性有关。
这是 SmashingMag 的一篇精彩文章，详细解释了这一点：http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-compressive-look/
对于 tl;dr 定位元素按照它们在 html 代码中放置的顺序进行堆叠，因此第一个大 div 内的 div_small 默认情况下始终会堆叠在第二个大 div 的“下方”。您可以通过在 css 中设置小 div 的 z-index 属性来解决此问题。
Phelios is correct, the issue you're running into is related to the z-index property.
Here's a great article from SmashingMag that explains it in detail: http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
For the tl;dr - positioned elements get stacked in the order they're placed in the html code, so your div_small inside the first large div is by default always going to be stacked "under" the second large div. You can fix this by setting the small div's z-index property in css.