層疊加的五條疊加法則(一)

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

[參與測試的瀏覽器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ]
[作業系統：Windows]

貌似很多同學對為什麼這個div在上層，那個div在下層、無論如何設定z-index都無法居上的問題糾結抓狂、上吐下瀉、噁心失眠、鬱郁而終，致使不敢隨意使用層的疊加。但層的疊加效果，在互動設計中卻頻頻出現，所以我們必須駕馭它，要駕馭它，就要掌握其規律。

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

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

註：這些概念為作者自訂，僅用於本文。

引用:

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

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

引用結束

接下來看看這五條法則：

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

代碼:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Chomo" />
<link rel="start" href="http://www.14px.com/" title="Home" />
<title>法則一：同輩元素定位方式相同，且無z-index設定時，html靠後者居上。</title>
</head>
<style type="text/css">
div { font:12px/1.5 arial;}
div strong { color:#fff; background:#036; display:inline-block;}
h3 strong { color:#f00;}
/*--- 定義方塊外形 ---*/
.div1,
.div2 {
   height:70px;
   width:150px;
   background:#cff;
   border:1px solid #036;
}
.grandDiv1,
.grandDiv2 {
   padding:10px;
   border:1px solid #060;
   width:174px;
   background:#cf9;
}
.parentDiv1,
.parentDiv2 {
   padding:10px;
   border:1px solid #f06;
   width:152px;
   background:#fcf;
}
/*--- 定義方塊位移位置、文字位置 ---*/
.grandDiv2 {
   margin-top:-50px;
   margin-left:95px;
}
.parentDiv2 {
   margin-top:-40px;
   margin-left:85px;
}
.div2 {
   margin-top:-20px;
   margin-left:75px;
   padding-top:30px;
   height:40px;
}
.grandDiv2 .parentDiv2,
.grandDiv2 .div2,
.parentDiv2 .div2 { margin:0;}
</style>
<body>
<h3>法則一：同輩元素定位方式相同，且無z-index設定時，html靠後者居上。</h3>
<div class="div1">.div1{position:static}</div>
<div class="div2">.div2{position.static}</div>
<div class="div1" style="position:relative;">.div1{position.relative}</div>
<div class="div2" style="position:absolute;">.div2{position.absolute}</div>
</body>
</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

層疊加的五條疊加法則(一)

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support