1基礎(chǔ)

Fixed：固定定位 是相對(duì)于瀏覽器窗口來定位的 Absolution： 絕對(duì)定位：當(dāng)沒有父元素或者父元素沒有進(jìn)行定位的時(shí)候，就是固定定位，以瀏覽器為標(biāo)的物 元素會(huì)脫離文檔流，若該元素沒有設(shè)置寬度，則寬度由元素里面的內(nèi)容決定， Relative： 不脫離文檔流 定位是相對(duì)于原本自身的位置，若沒有設(shè)置寬度，則寬度為父元素的寬度

2例子

3絕對(duì)定位 給第二個(gè)div設(shè)置absolute 沒有父元素的

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

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

<div?class="div1">第一個(gè)div</div>?????????<div?class="container1">第二個(gè)div的父div<div?class="div2">第二個(gè)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設(shè)置為relative，下面的div3,div4會(huì)上移，div2也設(shè)置為absolute， div2就會(huì)相對(duì)于父div來定位。

4相對(duì)定位 將第二個(gè)div設(shè)置為relative

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

6子相父相

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

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

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

?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。