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可見性規則

回答

相關問題