如何使用css代码将一个元素相对另一个元素进行“相对定位”呢?


摘要:
下文讲述css实现相对定位的方法分享,如下所示:

实现思路:
    1.父元素中使用
       position:relative;
    2.子元素中使用
       position: absolute;
    即可实现子元素相对父元素定位

例:
将divChild相对于divParent进行相对定位

<meta charset='utf-8' />
<style>
 #divParent{
	width:180px;height:180px;
	background-color:green;
	position:relative;
}
#divChild{
	width:20px;height:20px;
	background-color:red;
	position:absolute;
	right:20px;
    top:40px;
}
</style>
<p>
maomao365.com <br />
将divChild相对于divParent进行相对定位
</p>
<hr />
<div id="divParent">
	<div id="divChild"></div>
</div>
代码相关说明:
    position:absolute;
     绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定位或者相对定位的祖先元素)。
     当元素没有已定位的祖先元素,则它的位置则是相对于最初的包含块(body)
      
     绝对定位本身与文档流的渲染无关,不占用Html控件,绝对定位元素可覆盖到其它元素之上,此时我们可以使用z-index控制元素的显示顺序
     
     position:relative;
    相对定位:相对定位是相对于元素在文档中的初始位置——首先它出现在它所在的位置上(即不设置position时的位置,然后通过设置垂直或水平位置,让这个元素“相对于”它的原始起点进行移动;
    
    相对定位占用html空间,不会覆盖在其它元素之上
css相对定位的示例分享

css相对定位的示例分享