<!DOCTYPE html>
<html>
<head>
<title>z-index問題</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<!-- 如果打開不了，首先就檢查這裏的jquery導入是否正確了，我這的js文件路徑不一樣的 -->
<script src="js/jquery-1.4.2.min.js" type="text/javascript" ></script>
</head>
<style type="text/css">
.test-div{
border:1px blue solid;
width:300px;
min-height:100px;
position:relative;
-z-index:0;
font-size:18px;
font-family:microsoft yahe;
color:#fff;
}
.has-position-absolute{
border:1px #999999 solid;
width:100px;
height:200px;
background-color:#FAFAFA;
position:absolute;
z-index:99;
top:20px;
left:50px;
color:#333333;
}
</style>
<script type="text/javascript">
</script>
<body>
<div id="no-style">
<div id="div1" class="test-div" style="background-color:blue;">
div1的z-index爲1
<div id="test-position" class="has-position-absolute">
div3的z-index爲99
</div>
</div>
<div id="div2" class="test-div" style="background-color:red;">
<span>
div2的z-index爲2，但是現在絕對定位的div3明明z-index比它大，
卻依舊在這個層之下。原因是z-index是相對同一父元素下疊加時的z軸順序。
z-index具有繼承性，用簡單的數學邏輯表示就是：div1的z-index爲1，則它
的子元素div3的z-index就應該是1.xx，如果絕對定位的元素還有子元素，
則z=index值實際上就應該是1.xx.xx。下面的div2的z-index值爲2，所以在div3之上
</span>
</div>
<pre style="font-size:18px">
淺說position定位及z-index使用
使用前提
z-index只能在position屬性值爲relative或absolute或fixed的元素上有效。
基本原理
z-index值可以控制定位元素在垂直於顯示屏方向（Z 軸）上的堆疊順序（stack order），值大的元素髮生重疊時會在值小的元素上面。
使用的相對性
z-index值只決定同一父元素中的同級子元素的堆疊順序。父元素的z-index值（如果有）爲子元素定義了堆疊順序（css版堆疊“拼爹”）。
向上追溯找不到含有z-index值的父元素的情況下，則可以視爲自由的z-index元素，它可以與父元素的同級兄弟定位元素或其他自由的定位元素來比較z-index的值，
決定其堆疊順序。同級元素的z-index值如果相同，則堆疊順序由元素在文檔中的先後位置決定，後出現的會在上面。
所以如果當你發現一個z-index值較大的元素被值較小的元素遮擋了，請先檢查它們之間的dom結點關係，多半是因爲其父結點含有激活並設置了z-index值的position定位元素。
也因爲這個相對性，還會引發瀏覽器表現不一致出現兼容問題。原因是ie6、7下面position值爲非static的元素在未設置z-index值的情況下都會被隱含添加z-index:0，
而Firefox/Chrome等現代瀏覽器會遵循標準默認z-index:auto不會產生值。
還有一點需要注意，負值的z-index也依照大小比較的原理，但一般來說負值的z-index會被透明的body覆蓋導致點擊等事件響應出現問題，請謹慎使用。
</pre>
</div>
</body>
</html>z-index無效，無論設置多大都被其他的元素覆蓋
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章