css定位與z-index例項
阿新 • • 發佈：2019-02-10
<html>
<head>
<style>
/* 靜態 */
#ct1{
background:green;
height:200px;
width:200px;
margin-bottom:10px;
}
#subCt1{
position:static;
width:50%;
height:50%;
background:yellow;
}
/* 相對 */
#ct2{
background:green;
height:200px;
width:200px;
margin-bottom:10px;
}
#subCt2{
position:relative;
width:50%;
height:50%;
top:50%;
left:50%;
background:yellow;
}
/* 絕對 */
#ct3,#ct4{
background:green;
height:200px;
width:200px;
position:relative;
margin-bottom:10px;
}
#subCt3,#subCt4{
position:absolute;
height:50%;
width:50%;
top:50%;
left:50%;
background:yellow;
}
#ct4 p{
position:relative;
z-index:1;
}
#subCt4{
z-index:0;
}
</style>
</head>
<body>
<h1>靜態定位</h1>
<div id="ct1">
<div id="subCt1">
</div>
</div>
<h1>相對定位</h1>
<div id="ct2">
<div id="subCt2">
</div>
<p>
它偏移了，原來的位置還佔用著!而且還把俺給覆蓋了……
</p>
</div>
<h1>絕對定位</h1>
<div id="ct3">
<div id="subCt3">
</div>
<p>
它偏移了，原來的位置讓出來了!接下來看下面會不會把俺給覆蓋了<br/>
看下面，有覆蓋了沒......<br />
看下面，有覆蓋了沒......<br />
看下面，有覆蓋了沒......<br />
看下面，有覆蓋了沒......<br />
看下面，有覆蓋了沒......<br />
呃——還是被覆蓋了……
</p>
</div>
<h1>z-index</h1>
<div id="ct4">
<div id="subCt4">
</div>
<p>
它偏移了，原來的位置讓出來了!接下來我不再想被覆蓋了，看我z-index的厲害<br/>
看下面，有覆蓋了沒......<br />
看下面，有覆蓋了沒......<br />
看下面，有覆蓋了沒......<br />
看下面，有覆蓋了沒......<br />
看下面，有覆蓋了沒......<br />
呵——覆蓋不了吧……
原來z-index只對定位元素有效呀!
</p>
</div>
</body>