1基礎

Fixed：固定定位 是相對于瀏覽器窗口來定位的 Absolution： 絕對定位：當沒有父元素或者父元素沒有進行定位的時候，就是固定定位，以瀏覽器為標的物 元素會脫離文檔流，若該元素沒有設置寬度，則寬度由元素里面的內容決定， Relative： 不脫離文檔流 定位是相對于原本自身的位置，若沒有設置寬度，則寬度為父元素的寬度

2例子

3絕對定位 給第二個div設置absolute 沒有父元素的

.div2{height:100px;background-color:?blueviolet;position:absolute;top:50px;left:50px; }第二個div設置了absolute,則該div的寬度就由文本決定，且下面的div會上移占據之前第二個div的位置，top 和left是相對于離它最近且不是static定位的父元素來定位的，在此div2因為沒有父元素，所以第二個div相 對于根元素即html元素來定位。

?4子絕父相 子絕兄弟相 給第二個div添加一個父div

<div?class="div1">第一個div</div>?????????<div?class="container1">第二個div的父div<div?class="div2">第二個div</div>????</div>????? </div>.container1 {position:relative;height:200px;background-color:?greenyellow; }? ? ? ? ? ? .div2 {height:100px;background-color:?blueviolet;position:absolute;top:50px;left:50px; }div2的父div設置為relative，下面的div3,div4會上移，div2也設置為absolute， div2就會相對于父div來定位。

4相對定位 將第二個div設置為relative

.div2{height:100px;background-color:?blueviolet;?????????position:relative;left:50px;top:50px; }設置relative的div不會影響其他div的位置，且top和left是相對于它原本自身的位置來定位。

6子相父相

.div2{height:100px;background-color:?blueviolet;position:relative;top:50px;left:50px;??????????? }

兩個圖的第二個div的寬度不同，在沒有給div設置寬度的情況下，
第一個是設為absolute，所以寬度為文本寬度，第二個是relative，所以寬度與父元素寬度相同。

若將第二個div的寬度設為500px，得到效果如下：
父親absolute定位的子元素寬度不會影響父元素的寬，而relative定位的子元素會撐大父元素。

?

總結

以上是生活随笔為你收集整理的CSS固定定位[相对浏览器] 相对定位[相对自己] 绝对定位[有relative的元素]的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。