css☀子原素相对性父原素开展精准定位的完成

处理计划方案

在父原素里加入position:relative;
子原素里加入position:absolute; right:20px;

编码

html构造

<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;
}

实际效果

基本原理

访问器3D渲染html，是有文本文档流的叫法的，块级原素换行3D渲染，内行人原素内行人3D渲染，在这里里，2个div全是块级原素，一个父，一身高，一切正常来讲的3D渲染結果是父原素在访问器左上方，子原素在父原素的左上方。

假如大家要对子原素相对性父原素开展精准定位，就需要用对position特性。
position特性值

特性值 叙述 absolute 转化成肯定精准定位的原素，相对性于 static 精准定位之外的第一个父原素开展精准定位。 relative 转化成相对性精准定位的原素，相对性于其一切正常部位开展精准定位。

大家了解，要应用相对性于父原素的精准定位，毫无疑问要应用absolute，为何立即应用absolute不了功效？由于应用absolute相对性于父原素精准定位，对父原素有一个规定，便是父原素的position不可以是static，假如父原素的position是static那麼就再次往上搜索原素，了解找不position不以static的原素，对这一原素开展相对性精准定位，因此，必须将父原素的position设定为relative，那样做是沒有危害的，由于，relative仅仅相对性于一切正常部位开展精准定位，一切正常部位便是说白了的文本文档流默认设置的輸出部位，假如大家设定了position为relative而不设定偏位量x，y，那么就非常于父原素的部位是沒有变化的。

到此这篇有关css子原素相对性父原素开展精准定位的完成的文章内容就详细介绍到这了,大量有关css子原素相对性父原素精准定位內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！