范仁義css3課程---26、絕對定位

本文轉載自查看原文 2020-02-09 11:05 678 范仁義css3課程/ 7_錄播課/ 1_css（布局、z-index等）

范仁義css3課程---26、絕對定位

一、總結

一句話總結：

絕對定位是定位的一種，絕對定位會脫離文檔流，用position: absolute來設置，通過top、bottom、left、right可以設置定位的偏移量

1、絕對定位的基本操作？

對元素設置position屬性為absolute，然后用top、bottom、left、right中的一個或者兩個設置偏移

.span1{
    position: absolute;
    left: 200px;
    top: 200px;
}

2、絕對定位(absolute)的主要特點？

絕對定位會【脫離文檔流】，絕對定位是【相對於離他最近的開啟了定位的祖先元素進行定位】，如果所有的祖先元素都沒有開啟定位，則會相對於瀏覽器窗口進行定位

3、絕對定位(absolute)的父元素為什么一般都設置為相對定位(relative)？

表示這個絕對定位是相對父元素來進行的

二、絕對定位

博客對應課程的視頻位置：26、絕對定位
https://www.fanrenyi.com/video/10/66

1、層布局

層布局模型就像是圖像軟件PhotoShop中非常流行的圖層編輯功能一樣，每個圖層能夠精確定位操作。
如何讓html元素在網頁中精確定位，就像圖像軟件PhotoShop中的圖層一樣可以對每個圖層能夠精確定位操作。CSS定義了一組定位（position）屬性來支持層布局模型。
層模型有三種形式：
1、絕對定位(position: absolute)
2、相對定位(position: relative)
3、固定定位(position: fixed)

2、position的屬性值

static：默認值，元素沒有開啟定位

relative：開啟元素的相對定位

absolute：開啟元素的絕對定位

fixed：開啟元素的固定定位（也是絕對定位的一種）

3、絕對定位的特點

1.開啟絕對定位，會使元素脫離文檔流，

2.開啟絕對定位以后，如果不設置偏移量，則元素的位置不會發生變化

3.絕對定位是相對於離他最近的開啟了定位的祖先元素進行定位，如果所有的祖先元素都沒有開啟定位，則會相對於瀏覽器窗口進行定位

4.絕對定位會使元素提升一個層級

5.絕對定位會改變元素的性質，內聯元素變成塊元素，塊元素的寬度和高度默認都被內容撐開

4、定位偏移量的設置

當開啟了元素的定位（position屬性值是一個非static的值）時，可以通過left right top bottom四個屬性來設置元素的偏移量

left：元素相對於其定位位置的左側偏移量

right：元素相對於其定位位置的右側偏移量

top：元素相對於其定位位置的上邊的偏移量

bottom：元素相對於其定位位置下邊的偏移量到

三、課程代碼

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>絕對定位</title>
 6     <style>
 7         .box{
 8             width: 200px;
 9             height: 200px;
10         }
11         .box1{
12             background-color: #605ca8;
13         }
14         .box2{
15             background-color: red;
16             position: absolute;
17             left: 0;
18             top: 0;
19         }
20         .box3{
21             background-color: #bfa;
22         }
23         .box2_parent{
24             position: relative;
25             width: 300px;
26             height: 300px;
27             background-color: lightgray;
28             left: 200px;
29         }
30         .span1{
31             width: 100px;
32             height: 100px;
33             background-color: lemonchiffon;
34             position: absolute;
35             left: 200px;
36         }
37     </style>
38 </head>
39 <body>
40 <!--
41 絕對定位的特點
42 1、絕對定位會脫離文檔流
43 2、當我們給絕對定位的元素只設置絕對定位而沒有設置偏移量的時候，絕對定位的元素還是老老實實的待在原來的位置
44 3、絕對定位是否是按照瀏覽器的窗口來定位的呢？？？不是的，
45 絕對定位是相對於最近設置了定位屬性的祖先元素來定位的，
46 如果所有的祖先元素都沒有定位，那么就是相對於瀏覽器窗口來定位的
47 定位：不是static，可以是relative、fixed、absolute
48 最近設置了定位屬性的祖先元素：
49 小技巧：
50 我們做絕對定位的時候，我們一般會給這個絕對定位的元素的父親元素來設置相對定位。
51 這是為了表示我們的絕對定位是相對父元素來進行的
52 因為相對於父元素定位的話我們可以很好的定位原點
53 4、絕對定位可以使元素提升一個層級
54 5、絕對定位會改變盒子的一個性質，會把盒子變成快元素，這個時候的塊元素的寬高都是由內容撐開的
55 6、無論是塊狀元素還是內聯元素，都是可以設置絕對定位的
56 
57 絕對定位總結特點：
58 1、脫離文檔流
59 2、絕對定位是相對於最近設置了定位屬性的祖先元素來定位的，
60 如果所有的祖先元素都沒有定位，那么就是相對於瀏覽器窗口來定位的
61 
62 小技巧
63 我們做絕對定位的時候，我們一般會給這個絕對定位的元素的父親元素來設置相對定位。
64 這是為了表示我們的絕對定位是相對父元素來進行的
65 
66 
67 -->
68 <div class="box box1">box1</div>
69 <!--<div class="box2_parent">-->
70 <!--    <div class="box box2">box2</div>-->
71 <!--</div>-->
72 <div class="box box2">box2</div>
73 <div class="box box3">box3</div>
74 <span class="span1">
75 span1
76 </span>
77 </body>
78 </html>

四、什么是層模型

什么是層布局模型？層布局模型就像是圖像軟件PhotoShop中非常流行的圖層編輯功能一樣，每個圖層能夠精確定位操作，但在網頁設計領域，由於網頁大小的活動性，層布局沒能受到熱捧。但是在網頁上局部使用層布局還是有其方便之處的。下面我們來學習一下html中的層布局。
如何讓html元素在網頁中精確定位，就像圖像軟件PhotoShop中的圖層一樣可以對每個圖層能夠精確定位操作。CSS定義了一組定位（positioning）屬性來支持層布局模型。
層模型有三種形式：
1、絕對定位(position: absolute)
2、相對定位(position: relative)
3、固定定位(position: fixed)

1，層模型--絕對定位（相對於父類）
如果想為元素設置層模型中的絕對定位，需要設置position:absolute(表示絕對定位)，這條語句的作用將元素從文檔流中拖出來，然后使用left、right、top、bottom屬性相對於其最接近的一個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊，則相對於body元素，即相對於瀏覽器窗口。
如下面代碼可以實現div元素相對於瀏覽器窗口向右移動100px，向下移動50px。

2，層模型--相對定位（相對於以前）
如果想為元素設置層模型中的相對定位，需要設置position:relative（表示相對定位），它通過left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成一個元素(並且元素像層一樣浮動了起來)，然后相對於以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。
如下代碼實現相對於以前位置向下移動50px，向右移動100px;

3，層模型--固定定位（相對於網頁窗口）
固定住某一坐標。
fixed：表示固定定位，與absolute定位類型類似，但它的相對移動的坐標是視圖（屏幕內的網頁窗口）本身。由於視圖本身是固定的，它不會隨瀏覽器窗口的滾動條滾動而變化，除非你在屏幕中移動瀏覽器窗口的屏幕位置，或改變瀏覽器窗口的顯示大小，因此固定定位的元素會始終位於瀏覽器窗口內視圖的某個位置，不會受文檔流動影響，這與background-attachment:fixed?屬性功能相同。以下代碼可以實現相對於瀏覽器視圖向右移動100px，向下移動50px。並且拖動滾動條時位置固定不變。

五、層模型定位屬性position的屬性值

轉自或參考：CSS position(定位)屬性
https://www.cnblogs.com/guolao/p/9048308.html

關於CSS position，來自MDN的描述：

CSS position屬性用於指定一個元素在文檔中的定位方式。top、right、bottom、left 屬性則決定了該元素的最終位置。

然后來看看什么是文檔流(normal flow)，下面是 www.w3.org 的描述：

Normal flow

Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level boxes participate in a block formatting context. Inline-level boxes participate in an inline formatting context.

個人補充（此處參考FungLeo的博客文章，原文點此）：

normal flow直譯為常規流、正常流，國內不知何原因大多譯為文檔流；
窗體自上而下分成一行一行，並在每行中按從左至右的順序排放元素；
每個非浮動塊級元素都獨占一行，浮動元素則按規定浮在行的一端，若當前行容不下，則另起新行再浮動；
內聯元素也不會獨占一行，幾乎所有元素(包括塊級，內聯和列表元素）均可生成子行，用於擺放子元素；
有三種情況將使得元素脫離normal flow而存在，分別是 float，absolute ，fixed，但是在IE6中浮動元素也存在於normal flow中。

一、position: static

MDN的描述：

該關鍵字指定元素使用正常的布局行為，即元素在文檔常規流中當前的布局位置。此時 top、right、bottom、left 屬性無效。

個人補充：static是position的默認值。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>CSS-position-static</title>
 6     <link rel="stylesheet" href="https://cdn.bootcss.com/normalize/8.0.0/normalize.css">
 7     <style>
 8         .container{
 9             background-color: #868686;
10             width: 100%;
11             height: 300px;
12         }
13         .content{
14             background-color: yellow;
15             width: 100px;
16             height: 100px;
17             position: static;
18             left: 10px;/* 這個left沒有起作用 */
19         }
20     </style>
21 </head>
22 <body>
23     <div class="container">
24         <div class="content">    
25         </div>
26     </div>
27 </body>
28 </html>

對 content 的 position 設定 static 后，left就失效了，而元素（content）就以正常的 normal flow 形式呈現。

二、position: relative

MDN的描述：

該關鍵字下，元素先放置在未添加定位時的位置，再在不改變頁面布局的前提下調整元素位置（因此會在此元素未添加定位時所在位置留下空白）。position:relative 對 table-*-group, table-row, table-column, table-cell, table-caption 元素無效。

個人理解：相對於normal flow中的原位置來定位。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>CSS-position-relative</title>  
 8     <link rel="stylesheet" href="https://cdn.bootcss.com/normalize/8.0.0/normalize.css">
 9     <style>
10             .container{
11                 background-color: #868686;
12                 width: 100%;
13                 height: 300px;
14             }
15             .content_0{
16                 background-color: yellow;
17                 width: 100px;
18                 height: 100px;               
19             }
20             .content_1{
21                 background-color: red;
22                 width: 100px;
23                 height: 100px;
24                 position: relative;/* 這里使用了relative  */            
25             }
26             .content_2{
27                 background-color: black;
28                 width: 100px;
29                 height: 100px;               
30             }
31         </style>
32     </head>
33     <body>
34         <div class="container">
35             <div class="content_0">    
36             </div>
37             <div class="content_1">    
38             </div>
39             <div class="content_2">    
40             </div>
41         </div>   
42 </body>
43 </html>

position: relative

這是沒有設置left、top等屬性時，正常出現在normal flow中的位置。

接着添加left、top：

1 .content_1{
2                 background-color: red;
3                 width: 100px;
4                 height: 100px;
5                 position: relative;/* 這里使用了relative  */
6                 left: 20px;/* 這里設置了left和top */
7                 top: 20px;            
8             }

可以看到，元素（content_1）的位置相對於其原位置（normal flow中的正常位置）進行了移動。

三、position: absolute

MDN的描述

不為元素預留空間，通過指定元素相對於最近的非 static 定位祖先元素的偏移，來確定元素位置。絕對定位的元素可以設置外邊距（margin），且不會與其他邊距合並。

個人理解：生成絕對定位的元素，其相對於 static 定位以外的第一個父元素進行定位,會脫離normal flow。注意：是除了static外

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>CSS-position-static</title>
 8     <link rel="stylesheet" href="https://cdn.bootcss.com/normalize/8.0.0/normalize.css">
 9     <style>
10         .container{
11             background-color: #868686;
12             width: 100%;
13             height: 300px;
14             margin-top: 50px;
15         }
16         .content{
17             background-color: red;
18             width: 100px;
19             height: 100px;
20             position: absolute;
21             top: 10px;
22         }
23     </style>
24 </head>
25 <body>
26     <div class="container">
27         <div class="content">    
28         </div>
29     </div>
30 </body>
31 </html>

position: absolute

因為 content 的父元素 container 沒有設置 position，默認為 static，所以找到的第一個父元素是 body（<body></body>），可以看成是元素（content）相對於 body 向下移動10px。

四、position: fixed

MDN的描述

不為元素預留空間，而是通過指定元素相對於屏幕視口（viewport）的位置來指定元素位置。元素的位置在屏幕滾動時不會改變。打印時，元素會出現在的每頁的固定位置。fixed屬性會創建新的層疊上下文。當元素祖先的 transform 屬性非 none 時，容器由視口改為該祖先。

個人理解：fixed相對於window固定，滾動瀏覽器窗口並不會使其移動，會脫離normal flow。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>CSS-position-static</title>
 8     <link rel="stylesheet" href="https://cdn.bootcss.com/normalize/8.0.0/normalize.css">
 9     <style>
10         .container{
11             background-color: #868686;
12             width: 100%;
13             height: 1000px;
14         }
15         .content{
16             background-color: yellow;
17             width: 100px;
18             height: 100px;
19             position: fixed;/* 這里使用了fixed */
20         }
21     </style>
22 </head>
23 <body>
24     <div class="container">
25         <div class="content">    
26         </div>
27     </div>
28 </body>
29 </html>

position: fixed

這里就不上圖了，看一下代碼或者自己動手碼一下就能理解。

五、position: sticky

MDN的描述

盒位置根據正常流計算(這稱為正常流動中的位置)，然后相對於該元素在流中的 flow root（BFC）和 containing block（最近的塊級祖先元素）定位。在所有情況下（即便被定位元素為 table時），該元素定位均不對后續元素造成影響。當元素 B 被粘性定位時，后續元素的位置仍按照 B 未定位時的位置來確定。position: sticky對 table元素的效果與 position: relative 相同。

因為各大瀏覽器對於sticky的兼容問題，而且JS也可以實現這個功能，在這里就不進行深入了，了解一下就好。

六、position: inherit

w3school.com的描述

規定應該從父元素繼承 position 屬性的值。

inherit 繼承父元素，這個用得不多，所以也不繼續深入了。

六、層模型實例

轉自或參考：CSS層模型
https://www.cnblogs.com/zhaoww/p/5839665.html

1、絕對定位

需要設置position:absolute(表示絕對定位)，這條語句的作用將元素從文檔流中拖出來，然后使用left、right、top、bottom屬性相對於其最接近的一個具有定位屬性的父包含塊（下文的組合使用）進行絕對定位。如果不存在這樣的包含塊，則相對於body元素，即相對於瀏覽器窗口。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>absolute</title>
<style type="text/css">
div{
    width:200px;
    height:200px;
    border:2px red solid;
    position:absolute;
    left:50px;
    top:150px;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>

結果圖如下：

2、相對定位

需要設置position:relative（表示相對定位），它通過left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成一個元素(並且元素像層一樣浮動了起來)，然后相對於以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>relative樣式</title>
<style type="text/css">
#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:relative;
    left:50px;
    top:150px;    
}

</style>
</head>
<body>
    <div id="div1"></div>
    <span>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</span>
</body>
</html>

結果圖如下：

雖然div元素相對於以前的位置產生了偏移，但是div元素以前的位置還是保留着，所以后面的span元素是顯示在了div元素以前位置的后面。

3、固定定位

fixed：表示固定定位，與absolute定位類型類似，但它的相對移動的坐標是視圖（屏幕內的網頁窗口）本身。由於視圖本身是固定的，它不會隨瀏覽器窗口的滾動條滾動而變化，除非你在屏幕中移動瀏覽器窗口的屏幕位置，或改變瀏覽器窗口的顯示大小，因此固定定位的元素會始終位於瀏覽器窗口內視圖的某個位置，不會受文檔流動影響，這與background-attachment:fixed;屬性功能相同。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>relative樣式</title>
<style type="text/css">
#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:fixed;
    bottom:0;
    left:50px;
    
    
}

</style>
</head>
<body>
    <div id="div1"></div>
    <p>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</p>
    <p>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</p>
    <p>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</p>
    <p>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</p>
    <p>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</p>
    <p>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</p>
    <p>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</p
    <p>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</p>
    <p>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</p>
    <p>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</p>
    <p>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</p>
    <p>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</p>
    <p>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</p>
    <p>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</p>
    <p>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</p>
    <p>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</p
    <p>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</p>
    <p>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</p>
    <p>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</p>
    <p>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</p>
    <p>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</p>
    <p>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</p>
    <p>阿斯達四方打算購房的股份合計進口近乎苛刻嘉陵江凱樂科技立刻就會看見了就很高沿途體育與</p>
</body>
</html>

結果圖如下：

當滾動下拉框時，紅色框並不會隨着滾動而滾動。這應該就是那些小廣告啊，二維碼啊之類的設計方法

4、Relative與Absolute組合使用

使用position:absolute可以實現被設置元素相對於瀏覽器（body）設置定位以后，如何設置相對於其它元素進行定位？這就得使用position:relative來幫忙，但是必須遵守下面規范：

1、參照定位的元素必須是相對定位元素的前輩元素：

<div id="box1"><!--參照定位的元素-->
    <div id="box2">相對參照元素進行定位</div><!--相對定位元素-->
</div>

從上面代碼可以看出box1是box2的父元素（父元素當然也是前輩元素了）。

2、參照定位的元素必須加入position:relative;

#box1{
    width:200px;
    height:200px;
    position:relative;        
}

3、定位元素加入position:absolute，便可以使用top、bottom、left、right來進行偏移定位了。

#box2{
    position:absolute;
    top:20px;
    left:30px;         
}

這樣box2就可以相對於父元素box1定位了（這里注意參照物就可以不是瀏覽器了，而可以自由設置了）。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>相對參照元素進行定位</title>
<style type="text/css">
div{border:2px red solid;}
#box1{
    width:200px;
    height:200px;
    position:relative;
          
}
#box2{
     position:absolute;
    top:20px;
    left:30px;
          
}
/*下面是任務部分*/
#box3{
    width:200px;
    height:200px;
    position:relative;
    
}
#box4{
    width:99%;
     position:absolute;    
    bottom:0px;
    left:0px;
}
</style>
</head>

<body>
<div id="box1">
    <div id="box2">相對參照元素進行定位</div>
</div>

<h1>下面是任務部分</h1>
<div id="box3">
    <img src="http://img.mukewang.com/541a7d8a00018cf102000200.jpg">
    <div id="box4">當我還是三年級的學生時是一個害羞的小女生。</div>
</div>
</body>
</html>

結果圖如下：

Relative與Absolute組合使用還是很有用處的,

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 范仁義css3課程---27、固定定位范仁義css3課程---42、彈性盒子（flex）屬性范仁義css3課程---43、彈性盒子（flex）子元素屬性范仁義html+css課程---7、表單范仁義web前端介紹課程---4、html、css、js初體驗范仁義web前端介紹課程---1、課程意義妙味css3課程---1-1、css中自定義屬性可以用屬性選擇器么范仁義js課程---39、對象的json寫法 H5課程大綱關於CS50課程