首先明確幾點在文中所需要用到的概念：

靜態定位：position:static（為position屬性的默認值）。 動態定位：position:relative或position:absolute或position:fixed。 祖元素：任意包含該元素的元素。 父元素：直接包含該元素的祖元素。 同輩元素：擁有共同的父元素的元素。

注：這些概念為作者自定義，僅用于本文。

引用:

關于同輩元素是個非常關鍵的詞，這里還需要詳細解釋一下。

<div>
    <div></div>
    <div id="a"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div id="f">
    <div></div>
    <div id="b"></div>
    <div id="c"></div>
    <div></div>
    <div></div>
    <div></div>
</div>

在這個例子中，div#a與div#b并不是“同輩元素”，只有像div#b和div#c這樣擁有同樣父體div#f的的元素才能叫“同輩元素”。

引用結束

接下來看看這五條法則：

法則一：同輩元素定位方式相同，且無z-index設置時，html靠后者居上。

法則二：同輩元素同為動態定位時，且有z-index設置時，z-index值大者居上。

 猛點這里測試

法則三：同輩元素定位方式不同時，動態定位居上。

猛點這里測試

法則四：非同輩元素，任意一者及其祖元素不具備動態布局時，html靠后者居上。

猛點這里測試

法則五：【重要】非同輩元素，任意一者或其祖元素擁有動態定位時，同時各自向上尋找動態定位的祖元素，并分別從中拿出具備最高級別的祖元素（或其本身）進行比較。 

<div id="ab" style="position:absolute;">
    <div id="a" style="position:relative; z-index:100;">
        <div id="a_inner1">
            <div id="a_inner2">
                <div id="a_inner3" style="position:relative; z-index:98;">
                    <div id="a_inner4">
                        <div id="a_inner5">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="b">
        <div id="b_inner1">
            <div id="b_inner2">
                <div id="b_inner3" style="position:relative; z-index:99;">
                    <div id="b_inner4">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表