CSS可见性规则

我试图在Google上搜索这个，但无济于事。CSS可见性规则

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

举一个例子，假设我有两个大的div，DIV_LARGE1,DIV_LARGE2，它们不包含在彼此之内，并且有一个小格DIV_SMALL。当DIV_SMALL被定义在DIV_LARGE1内时，我可以看到它属于DIV_LARGE1的那部分，但与DIV_LARGE2共享的区域被隐藏在DIV_LARGE2下面。在页面呈现（点击某个）后，我显示DIV_SMALL（通过设置其display:inline），因此DIV_LARGE2在DIV_LARGE1之后出现在HTML代码中并不重要。

什么优先于什么？由于我的小div有position:relative，而其他div（DIV_LARGE*）有position:absolute，我可以推断绝对定位优先于相对，如果div没有在里面定义。但这是正确的吗？准确的规则是什么？

来源

2011-04-14 euphoria83

我认为一个HTML结构（与任何相关的CSS）比一段文本更容易可视化。 – BoltClock 2011-04-14 07:57:19

一些[jsFiddle演示]（http://jsfiddle.net）也会有帮助。 – BoltClock 2011-04-14 08:02:45

我想你是在谈论[z-index]（http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp），虽然我不确定我是否正确:) – Sufendy 2011-04-14 08:34:40

Phelios是正确的，您遇到的问题与z-index属性有关。下面是SmashingMag一个伟大的文章，解释它的细节：http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/

对于TL;博士 - 定位元素，会堆积在他们放在HTML代码的顺序，所以第一个大的div里面你div_small是默认总是会在第二个大分区下“叠加”。你可以通过在css中设置小div的z-index属性来解决这个问题。

来源

2011-04-14 22:06:08 Dylan

是的。我通过这样解决了问题。所以，如果一个div在html代码中接着一个，那么第二个div总是会覆盖第一个div，即使我们在整个页面加载之后出现第一个div也是如此。 – euphoria83 2011-04-14 22:34:31

是的，基本上堆叠顺序完全基于代码中元素的顺序。如果您在加载页面后出现新的div，请通过javascript说出，浏览器仍然会根据新div的放置位置呈现页面。使用浮点数和相对定位是解决此问题的方法，因此您可以将代码中稍后语义上的元素移动到页面上“较早”的位置。 – Dylan 2011-04-15 04:40:40

谢谢。接受答案。 – euphoria83 2011-04-15 05:02:07

CSS可见性规则

回答

相关问题