CSS學習筆記10 相對定位，絕對定位與固定定位

時間 2019-12-09

標籤 css 學習筆記相對定位絕對固定欄目 CSS 简体版

原文原文鏈接

文檔流中的元素的位置由元素在 (X)HTML 中的位置決定，這就是最原始的普通流，前面講到的浮動CSS學習筆記08 浮動能夠改變元素在文檔流中的位置，除了這個咱們還能夠經過使用CSS的position 屬性，來從新決定元素在文檔流中的位置。css

position 屬性值

static：默認的文檔流的佈局的方式，塊級元素生成一個矩形框，做爲文檔流的一部分，行內元素則會建立一個或多個行框，置於其父元素中。（忽略 top, bottom, left, right 或者 z-index 聲明）。
relative：相對於原來的位置進行偏移，完成的過程是首先按static(float)方式生成一個元素，相對於之前的位置，移動方向和幅度由left、right、top、bottom屬性肯定，它本來所佔的空間仍保留。
absolute：元素框從文檔流徹底刪除，元素原先在正常文檔流中所佔的空間會關閉，就好像元素原來不存在同樣，根據父容器（必須是非static的定位的容器）進行位置定位。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
fixed：固定在瀏覽器的某個位置，瀏覽器scroll時不會發生變化。

static就是默認的佈局方式，這裏不作介紹。html

relative 相對定位

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>CSS相對定位</title>
 6 
 7     <style type="text/css">
 8         div {height: 100px; width: 100px; border: 1px solid #000; background-color: yellow;}
 9     </style>
10 </head>
11 <body>
12     <div class="box1">box1</div>
13     <div class="box2">box2</div>
14     <div class="box3">box3</div>
15 </body>
16 </html>

這時候box1與box2按照static的佈局方式在頁面上進行定位，如今對box2進行相對定位瀏覽器

結果以下，box2的位置進行了偏移（這個偏移是相對於box2原先的位置進行偏移的），並無影響到box1與box3的位置佈局

注意，在使用相對定位時，不管是否進行移動，元素仍然佔據原來的空間。所以，移動元素會致使它覆蓋其它框。學習

absolute 絕對定位

絕對定位使元素的位置與文檔流無關，所以不佔據空間。這一點與相對定位不一樣，相對定位實際上被看做普通流定位模型的一部分，由於元素的位置相對於它在普通流中的位置。spa

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>CSS絕對定位</title>
 6 
 7     <style type="text/css">
 8         .parent {height: 200px; width: 200px; background-color: yellow;}
 9         .child {height: 100px; width: 100px; background-color: red; top: 0px; right: 0px; position: absolute;}
10     </style>
11 </head>
12 <body>
13     <div class="parent">
14         parent
15         <div class="child">
16             child
17         </div>
18     </div>
19 </body>
20 </html>

如今給parent也添加一個定位屬性code

效果以下，能夠看到child的位置發生了變化htm

從上面的現象能夠總結出一點：絕對定位的元素的位置相對於最近的已定位祖先元素，若是元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊（這個例子中指body元素與parent）。blog

要使用絕對定位時，必需要有2個條件
　　一、必須給父元素增長定位屬性，通常建議使用position:relative
　　二、給子元素加絕對定位position:absolute，同時要加方向屬性（指left、right、top、bottom屬性）文檔

fixed 固定定位

與absolute定位類型相似，但它的相對移動的座標是視圖（屏幕內的網頁窗口）自己。因爲視圖自己是固定的，它不會隨瀏覽器窗口的滾動條滾動而變化，除非你在屏幕中移動瀏覽器窗口的屏幕位置，或改變瀏覽器窗口的顯示大小，所以固定定位的元素會始終位於瀏覽器窗口內視圖的某個位置，不會受文檔流動影響。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>CSS固定定位</title>
 6     <style type="text/css">
 7         .back-top {height: 40px; width: 40px; background-color: blue; color: #fff; position: fixed; bottom: 10px;right: 10px;}
 8     </style>
 9 </head>
10 <body>
11     <div class="back-top">回到頂部</div>    
12     <p>段落1</p>
13     <p>段落2</p>
14     <p>段落3</p>
15     ...
16     <p>段落49</p>
17     <p>段落50</p>
18 </body>
19 </html>