css中子元素相對(duì)父元素定位的實(shí)現(xiàn)方法

這篇文章給大家分享的是有關(guān)css中子元素相對(duì)父元素定位的實(shí)現(xiàn)方法的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。

在css中，可以使用position屬性，通過(guò)給父元素設(shè)置相對(duì)定位“position:relative;”樣式，給子元素設(shè)置絕對(duì)定位“position:absolute;”樣式來(lái)實(shí)現(xiàn)子元素相對(duì)父級(jí)元素定位。

css中子元素相對(duì)父元素定位的實(shí)現(xiàn)方法

父級(jí)元素 樣式設(shè)置：

position:relative;

子元素樣式：

position:absolute;

示例代碼：

html結(jié)構(gòu)

<div id="div1">
<div id="div2"></div>
</div>

css

#div1{
width:500px;height:500px;
background-color:darkgray;
position:relative;
}
#div2{
width:30px;height:30px;
background-color:red;
position:absolute;
right:20px;
}

原理

瀏覽器渲染html，是有文檔流的說(shuō)法的，塊級(jí)元素?fù)Q行渲染，行內(nèi)元素行內(nèi)渲染，在這里，兩個(gè)div都是塊級(jí)元素，一個(gè)父，一個(gè)子，正常來(lái)說(shuō)的渲染結(jié)果是父元素在瀏覽器左上角，子元素在父元素的左上角。

如果我們要對(duì)子元素相對(duì)父元素進(jìn)行定位，就要用對(duì)position屬性。

position屬性值

我們知道，要使用相對(duì)于父元素的定位，肯定要使用absolute，為什么直接使用absolute不起作用？因?yàn)槭褂胊bsolute相對(duì)于父元素定位，對(duì)父元素有一個(gè)要求，就是父元素的position不能是static，如果父元素的position是static那么就繼續(xù)向上查找元素，知道找不position不為static的元素，對(duì)這個(gè)元素進(jìn)行相對(duì)定位，所以，需要將父元素的position設(shè)置為relative，這樣做是沒(méi)有影響的，因?yàn)?，relative只是相對(duì)于正常位置進(jìn)行定位，正常位置就是所謂的文檔流默認(rèn)的輸出位置，如果我們?cè)O(shè)置了position為relative而不設(shè)置偏移量x，y，那就相當(dāng)于父元素的位置是沒(méi)有變動(dòng)的。

感謝各位的閱讀！關(guān)于css中子元素相對(duì)父元素定位的實(shí)現(xiàn)方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！