<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1 {
border: 1px solid red;
width: 100px;
height: 100px;
position: static; /* 默認文檔流是static設置 */
}
#div2 {
border: 1px solid blue;
width: 100px;
height: 100px;
position: absolute; /* 脫離html文檔流使其自己設置定位 是相對整個頁面的定位 */
/* left:300px;
top: 250px; */
/* right: 0px;
bottom: 0px; */
right: 100px;
bottom: 300px;
}
#div3 {
border: 1px solid lime;
width: 100px;
height: 100px;
position:fixed; /* 脫離html文檔流使其自己設置定位 是相對整個電腦屏幕進行定位 */
right: 300px;
bottom: 300px;
}
#div4
{
border: 1px solid yellow;
width: 100px;
height: 100px;
position: relative; /* 脫離html文檔流使其自己設置定位 是相對原來文檔流中的位置進行定位 */
left: 50px;
top: 50px;
}
/* position:inherit 指該元素繼承於父元素 */
/* ----------------------------------------------------------------- */
#div5
{
background-color:blue;
width: 100px;
height: 100px;
position:absolute;
left: 100px;
top: 500px;
z-index: 100; /* 設置元素的層級 誰在誰在的上面 */
}
#div6
{
background-color: red;
width: 100px;
height: 100px;
position: absolute;
left: 120px;
top: 520px;
z-index: 99;
}
#div7
{
background-color: yellow;
width: 100px;
height: 100px;
position: absolute;
left: 140px;
top: 540px;
z-index: 98;
}
</style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="div4">div4</div>
換行<br>
換行<br>
換行<br>
換行<br>
換行<br>
換行<br>
換行<br>
換行<br>
換行<br>
換行<br>
換行<br>
換行<br>
換行<br>
換行<br>
換行<br>
換行<br>
換行<br>
換行<br>
換行<br>
換行<br>
換行<br>
換行<br>
換行<br>
換行<br>
換行<br>
換行<br>
換行<br>
換行<br>
換行<br>
換行<br>
換行<br>
換行<br>
換行<br>
換行<br>
<div id="div5"></div>
<div id="div6"></div>
<div id="div7"></div>
</body>
</html>