絕對定位和相對定位

時間 2019-11-17

原文原文鏈接

相對定位html

元素設置position值：position:relative; 此屬性值的設置，元素沒有脫離文檔流，仍是普通流定位模型的一部分，會對文檔流中其它元素佈局產生影響瀏覽器

首先給你們演示一個代碼佈局

<!DOCTYPE html>
<html>
<head>
<style>
.div1{background-color:red;height:100px}
.div2{background-color:green;height:50px;}
.div3{background-color:blue;height:30px}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

頁面顯示結果：spa

接着咱們將第二個div加入relative相對定位屬性，他會保留原有位置，根據原有文檔位置進行相對定位:code

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5 .div1{background-color:red;height:100px}
 6 .div2{background-color:green;height:50px;position:relative;top:90px}
 7 .div3{background-color:blue;height:30px}
 8 </style>
 9 </head>
10 <body>
11 <div class="div1"></div>
12 <div class="div2"></div>
13 <div class="div3"></div>
14 </body>
15 </html>

須要注意的是相對定位並無脫離文檔流htm

絕對定位blog

設置position值：position:absolute; 此屬性值的設置，元素從文檔流徹底刪除文檔

絕對定位的元素的偏移位置以最近的定位(包括相對定位和絕對定位)祖先元素做參照物。若是元素沒有已定位(包括相對定位和絕對定位)的祖先元素，那麼它的參照物爲最頂級元素（因爲瀏覽器的默認參照物不一樣，物多是BODY或 HTML 元素）。it

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        .div1{background-color:red;height:100px;}
        .div{background-color:yellow;height:50px;}
        .div2{background-color:green;height:20px;}
        .div3{background-color:blue;height:30px}
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div">
    <div class="div2">
     這是絕對定位元素
    </div>
</div>
<div class="div3"></div>
</body>
</html>

顯示以下：io

以後爲div2設置absolute，若是

.div2{background-color:green;height:20px;position: absolute;}
若是沒有指定絕對定位位置，則仍是保留在原來的文檔流中初始位置，若果指定位置後，就會銷燬文檔流中的位置。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <style>
 6         .div1{background-color:red;height:100px;}
 7         .div{background-color:yellow;height:50px;position: relative;top:20px}
 8         .div2{background-color:green;height:20px;position: absolute;top:10px}
 9         .div3{background-color:blue;height:30px}
10     </style>
11 </head>
12 <body>
13 <div class="div1">1</div>
14 <div class="div">
15     2
16     <div class="div2">
17      這是絕對定位元素
18     </div>
19 </div>
20 <div class="div3">3</div>
21 </body>
22 </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。