4.1 定位

4.1.1絕對定位

格式:position:absolute

feature: 1. 脫離原來位置進行定位(當一個元素成為absolute定位,他會脫離原來的層面,跑到上一個層面去,他原來位置真空了,在他下面的元素就會跑上去)

              2.現對於最近的有定位屬性的父級進行定位,,如果父級沒有定位,那就相對於文件進行定位 

example:

html程式碼:

<div>寫程式碼,真好</div>

<p>對啊,寫程式碼,真好</p>

css程式碼:

div,

p{

color:#f00;

}//這是為了讓字型明顯一點,相對於部落格文件的黑色字型

此時的輸出結果是:

當css程式碼中讓div變成絕對定位時,

div{

position:absolute;

}

輸出結果:

可以看到p標籤裡面的文字上去第一行,div標籤裡的內容脫離他本來的層面,並且他原來的位置真空

此時我們可以設定div標籤的位置,與absolute相配合的兩個屬性是left和top,

如下

css程式碼:

div{

position:absolute;

left:9em;

top:0;

}

執行結果:

分析:

div脫離原來層面,因為沒有有定位的父級,他相對於文件進行定位,距離左邊瀏覽器邊框為9em,距離瀏覽器上邊框距離為0,

如果在html的p標籤之後再加一個同樣的p標籤

html程式碼:

<div>寫程式碼,真好</div>

<p>對啊,寫程式碼,真好</p>

<p>對啊,寫程式碼,真好</p>

執行結果:

4.1.2相對定位

feature:保留原來位置進行定位,他雖然跑到另一個層面上去了,但是他原來的位置不會變成真空的,就像靈魂出竅一樣,肉體還在那放的,後面的元素依然在他所生成的位置

基本格式:position:relative

html程式碼:

<div>寫程式碼,真好</div>

<p>對啊,寫程式碼,真好</p>

<p>對啊,寫程式碼,真好</p>

css程式碼:

div {

position: relative;

left: 0;

top: 0;

}

div,

p{

color: #f00;

}

執行結果:

後面的元素該在哪就在哪

總結:公司開發的話,一般用relative作為參照物,因為他對後面的元素麼有影響

4.1.3 fixed定位

廣告定位:基本格式 position:fixed

html程式碼:
<div >歡迎來到笨豬的部落格</div>

css程式碼:

div{

position:fixed;

top:50%;

left:50%;

width:200px;

height:200px;

margin-left:-100px;

margin-top:-100px;

line-height:200px;

text-align:center;

color:#f40;

border:1px solid black;

}

執行結果:

這個框居中顯示,有滾動條,並且滑動滾動條,或者縮放頁面,這個定位框都不會改變