css屬性之定位
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;
}
執行結果:
這個框居中顯示,有滾動條,並且滑動滾動條,或者縮放頁面,這個定位框都不會改變