有關 Z-index

時間 2019-11-11

標籤有關 index 简体版

原文原文鏈接

在開始Z-index以前css

首先須要理解兩個概念，一是文檔，二是普通文檔流。html

我對文檔的理解是：用必定的方式把人類文明呈現出來，而且能夠複製來進行傳播，因此思想跟精神不能算文檔。瀏覽器

而書籍跟這篇帖子的主角——網頁都算做文檔。測試

咱們所瀏覽的網頁，其實就是HTML或者XHTML或者XML文檔，它們之間的區別咱們暫時能夠不用考慮，咱們只須要考慮網頁文檔跟其餘文檔的區別。網頁文檔就是將文本內容以不一樣的方式組織起來、用不一樣的方式表現出來。爲了達到這一目的，咱們須要規範化用一些元素來固定地表現某一種方式，因而標籤便產生了。好比咱們須要一張表格來裝數據，那麼咱們定義一個<table></table>就產生一個表格，咱們即可以把文本數據放到這個標籤裏，文本內容便會以一個表格的方式表現出來，其餘相似，咱們須要表現一張圖像，便用<img>，須要一個列表，用<ul></ul>。（若是直接把文本放到HTML文檔中，會默認給他加上一個塊級標籤，詳情見《精通CSS 高級Web標準解決方案第二版》P44，感謝崔瑜琢兄，他送了我這本書）ui

當咱們用這些標籤把咱們的內容組織起來後，便交給瀏覽器解析，瀏覽器解析後即是咱們看到的網頁了。（不一樣的瀏覽器解析的結果不一樣，這就是瀏覽器差別性）spa

這些標籤在文檔裏會安分地排列，都會依據本身所包含的內容井水不犯河水地排列。例如，塊級元素會一行一行地排列，行級元素會挨次排成一行。它們都有本身的區域，彼此不產生交集，這就是普通文檔流。xml

有兩種方式能夠打破普通文檔流的方式，讓他們的排列有一點點小小的錯動，這就是浮動跟定位。這種錯動極可能是兩個標籤重疊到一塊兒去了，那麼讓誰顯示出來呢，誰擋住誰呢。因而Z-index出場了。htm

測試代碼以下：blog

<!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" />
<title>Z-index</title>
<style type="text/css">

div{width:200px;
height:200px;
}
body{
padding:20px;
z-index:auto;
}
#div1{
z-index:auto;
background:#000;
position:absolute;
top:0;
left:0;
color:#FFF;
}
#div2{
z-index:1;
background:#999;
top:80px;
left:80px;
position:absolute;
}
#div3{
z-index:1;
background:#000;
color:#FFF;
top:80px;
left:80px;
position:absolute;
}
#div4{
z-index:1;
background:#0CF;
color:#03F;
top:180px;
left:250px;
position:absolute;
width:100px;
height:100px;
}
#div5{
z-index:auto;
background:#CC0;
color:#03F;
top:260px;
left:280px;
position:absolute;
width:100px;
height:100px;
text-align:right;
}
#div6{
z-index:auto;
background:#33C;
color:#FFF;
top:280px;
left:300px;
position:absolute;
text-align:right;
}
</style>
</head>

<body>
<div id="div1">div1</div>
<div id="div2">
div2
<div id="div3">
div3
</div>
<div id="div4">div4</div>
<div id="div5">div5</div>
</div>
<div id="div6">div6</div>
</body>
</html>

FF9.0.1測試圖：utf-8