技術標籤：csscss定位html

CSS定位

一、定位

定位指的是將指定的元素擺放到頁面的任意位置

通過定位可以任意擺放元素

通過position屬性來設定元素的定位

可選值： static:預設值，元素沒有開啟定位

      relative：開啟元素的相對定位

      absolute：開啟元素的絕對定位

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

當開啟了元素的定位（position的屬性值是一個非static的值）

可以通過left、right、top、bottom四個屬性來設定元素的偏移量

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

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

 top：元素的相對與其定位位置的上側偏移量

 bottom：元素的相對與其定位位置的底側偏移量
 

二、相對定位

當元素的position屬性設定為relative時，則開啟了元素的相對定位

1、當開啟了元素的相對定位以後，而不設定偏移量時，元素不會發生任何變化

2、相對定位是相對於元素在文件流中原來的位置進行定位

3、相對定位的元素不會脫離文件流

4、相對定位會使元素提升一個層級

5、相對定位不會改變元素的性質：塊還是塊，內聯還是內聯

  通常偏移量只需要使用兩個就可以對一個元素進行定位

      一般選擇水平方向的一個偏移量和一個垂直方向的偏移量來為一個元素進行定位

eg:

.he{

width: 1000px;

height: 500px;

background-color:greenyellow;

position: relative;

left: 0px;

top: 0px;
 

}

.he1{

width: 500px;

height: 200px;

background-color: thistle;

position: relative;

left: 500px;

top: 0px;

}

.he2{

width: 100px;

height: 200px;

background-color: violet;

position:relative;

left:900px;

bottom:200px

}

三、絕對定位

當position屬性值設定為absolute時，則開啟了元素的絕對定位

1、開啟了絕對定位會脫離文件流

2、當開啟了元素的絕對定位以後，而不設定偏移量時，元素不會發生任何變化

3、絕對位置是相對於離他最近的開啟了定位的祖先元素進行定位

父相子絕

（一般開啟了子元素的絕對定位都會開啟父元素的相對定位）

  如果所有的祖先元素都沒有開啟定位，則會相對於瀏覽器視窗進行定位

      4、絕對定位會是元素提升一個層級

      5、絕對定位會改變元素性質：內聯元素變成塊元素

                               塊元素的寬度和高度預設都被內容撐開

eg:

.box1{

width: 1000px;

height: 500px;

background-color:greenyellow;

position: absolute;

left: 0px;

top: 0px;

}

.box2{

width: 500px;

height: 100px;

background-color: thistle;

position: absolute;

top: 100px;

left: 0px;

}

四、固定定位

當元素的position屬性值為fixed時，則開啟了元素的固定定位

固定定位也是絕對定位的一種，大部分特點和絕對定位一樣

不同的點：固定定位永遠相對於瀏覽器視窗進行定位

      固定定位會固定在瀏覽器視窗的某個位置，不會隨滾動條滾動

      TE6不支援固定定位