標籤：size append 絕對位置 視圖 head 保留 tom 介面 class
CSS 定位機制假設您認為這篇文章還不錯。能夠去H5專題介紹中查看很多其它相關文章。
CSS中一共同擁有三種基本定位機制：普通流、浮動、絕對位置。
假設不進行專門指定。全部的標籤都在普通流中定位。
區塊層級元素從上到下一個接一個的排列，框之間的垂直距離是由框的垂直外邊距計算出來。
行內框在一行中水平布置。
能夠使用水平內邊距、邊框和外邊距來調整它們之間的間距。
通過position屬性。我們能夠選擇4種不同類型的定位，這會影響元素框產生的方式。
包括4個屬性值：static、relative、absolute、fixed
static : 元素框正常產生。區塊層級元素產生一個矩形框，作為文檔流的一部分。行內元素則會建立一個或多個行框。置於其父元素中。
relative : 元素框位移某個距離。元素仍然保持其未定位前的形狀，它原本所佔的空間仍然保留。 absoulte : 元素框從文檔流中全然刪除，並相對於其包括塊定位。元素原先在正常文檔流中所佔的空間會關閉。就好像元素不存在一樣。
元素定位後產生一個塊元素，而不論原來它在正常文檔流中產生何種類型的框。
fixed : 元素框的表現相似將position設定為absoulte，只是其包括塊是瀏覽器表單。
static是position屬性的預設值。無特殊定位。均為正常定位。
HTML代碼:
<p class="p1"> 我是p1</p><p class="p2"> 我是p2</p><p class="p3"> 我是p3</p>CSS代碼:
.p1 { position: relative; left: 30px;}.p2 { position: relative; right: 30px;}：
解釋：
position: relative;參考的是自己原來得位置。left: 30px;。這就會使元素距離左側產生30px的間距。
right: 30px，會使元素距離右側30px的間距。就產生了跑到螢幕外面的情況 position: relative;，否則top、right、bottom、left是不起作用的。 HTML代碼:
啦啦啦啦啦<h1 class="h1">我是h1大標題</h1>CSS代碼:
.h1 { position: absolute; top: 100px; left: 100px;}沒有設定CSS樣式的樣子：
設定了CSS樣式後的樣子：
解釋：
postion: absolute;參考的是自身的包括塊，也就是自己的父視圖 position: absolute;屬性之後，標籤的位置就變得絕對了。這個時候我們設定top、right、bottom、left當中的不論什麼一個屬性。都能夠設定標籤的位置。 position: absolute;，否則top、right、bottom、left是不起作用的。
HTML代碼:
<p class="one"> 我是p one</p><p class="two"> 我是p two</p>CSS代碼:
.one { position: fixed; top: 100px; left: 30px;}.two { position: fixed; top: 50px; right: 30px;}效果展示：
解釋：
position: fixed;參考系是瀏覽器的表單 position: fixed;屬性之後。這些標籤就僅僅會相對於瀏覽器表單進行位置的設定。忽略網頁的滾動 postion: fixed;屬性。而是直接設定top、right、bottom、left都不會起作用 參考文章：http://www.w3school.com.cn/css/css_positioning.asp
關於介面排布優先順序的問題 z-index
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style media="screen"> div{ width: 100px; font-size: 50px; position: absolute; height: 100px; } .a{ background-color: red; left: 0; top: 0; /*設定優先權。數字越大，放置越靠前*/ z-index: 3; } .b{ background-color: blue; left: 40px; top: 40px; z-index: 2; } .c{ background-color: green; left: 80px; top: 80px; z-index: 100; } </style></head><body><div class="a">1</div><div class="b">2</div><div class="c">3</div></body></html>關於介面元素框位移
位移前：
位移後：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .wrap{ width: 300px; height: 300px; border: 1px solid red; margin: 100px; padding: 100px; position: relative; padding-left: 0; } .inner{ width: 200px; height: 200px; background-color: green; padding: 50px; position: relative; } .content{ width: 50px; height: 50px; background-color: red; position: absolute; left: 0; } </style></head><body> <!-- position:absolute;預設是相對於表單進行定位 --> <div class="wrap"> <div class="inner"> <div class="content"></div> </div> </div></body></html>2016.3.14__CSS 定位__第六天
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
