<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>絕對/相對/固定定位</title>
<style type="text/css">
.outdiv{
border: 1px solid blueviolet;
width: 686px;
height: 1086px;
margin-top: 80px;
margin-left: 20px;
}
/**/
.div1{
/*1,一旦寫了絕對定位,就會相對於他的上級元素(父級元素)移動單座標原點
座標原點是最左最上的角的小點,2,當使用了絕對定位其他元素將擠上來,
且浮動上來的元素如果和定位元素重合,浮動上來的元素將被覆蓋
4,如果寫了橫縱座標top left 那麼他講相對於整整張網頁的座標原點
來定位,不再是父級元素的座標原點,5,絕對定位是脫離了正常文檔流的
不考慮他周圍其他元素的無論什麼佈局.6如果他的父級元素也寫了絕對定位那麼
子級元素的絕對定位將相對於父級元素進行絕對定位(也就是成了相對定位)*/
position: absolute ;
z-index: 1;
top: 20px;
left: 180px;
border: 1px solid red;
width: 286px;
height: 198px;
background-color: green;
}
.div2{
/*相對定位就是相對於自己的父級元素來定位,
父級元素的座標原點就是相對定位的座標原點*/
position: relative;
/*層疊順序,當這個值爲負數的時候將作爲背景顯示,數字越大越靠前,數字大的會覆蓋數字小的*/
z-index: -1;
top: 20px;
left: 58px;
border: 1px solid blue;
height: 86px;
width: 800px;
background-color: red;
}
.div3{
/*固定定位,不管頁面如何拖動滾動我都在這裏,其他的定位會因爲頁面拖動而動*/
position: fixed;
bottom: 10px;
right: 20px;
border: 1px solid gold;
width: 286px;
height: 186px;
background-color: blue;
}
</style>
</head>
<body>
<div>
<div class="outdiv">
<div class="div1">
<span>我是第一個div</span>
</div>
<div class="div2">
<span>我是第二個div</span>
</div>
<div class="div3">
<span>我是第三個div</span>
</div>
</div>
</div>
</body>
</html>
