解決方案

在父元素中加入position:relative;
子元素中加入position:absolute; right:20px;

代碼

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，是有文檔流的說法的，塊級(jí)元素?fù)Q行渲染，行內(nèi)元素行內(nèi)渲染，在這里，兩個(gè)div都是塊級(jí)元素，一個(gè)父，一個(gè)子，正常來(lái)說的渲染結(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，這樣做是沒有影響的，因?yàn)椋瑀elative只是相對(duì)于正常位置進(jìn)行定位，正常位置就是所謂的文檔流默認(rèn)的輸出位置，如果我們?cè)O(shè)置了position為relative而不設(shè)置偏移量x，y，那就相當(dāng)于父元素的位置是沒有變動(dòng)的。

到此這篇關(guān)于css子元素相對(duì)父元素進(jìn)行定位的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)css子元素相對(duì)父元素定位內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論