html相对其他元素的位置,如何使用css代码将一个元素相对另一个元素进行“相对定位”呢?...

摘要:

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

实现思路:

1.父元素中使用

position:relative;

2.子元素中使用

position: absolute;

即可实现子元素相对父元素定位

例:

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

#divParent{

width:180px;height:180px;

background-color:green;

position:relative;

}

#divChild{

width:20px;height:20px;

background-color:red;

position:absolute;

right:20px;

top:40px;

}

maomao365.com

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

---

代码相关说明:

position:absolute;

绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定位或者相对定位的祖先元素)。

当元素没有已定位的祖先元素,则它的位置则是相对于最初的包含块(body)

绝对定位本身与文档流的渲染无关，不占用Html控件，绝对定位元素可覆盖到其它元素之上，此时我们可以使用z-index控制元素的显示顺序

position:relative;

相对定位:相对定位是相对于元素在文档中的初始位置——首先它出现在它所在的位置上(即不设置position时的位置，然后通过设置垂直或水平位置，让这个元素“相对于”它的原始起点进行移动；

相对定位占用html空间，不会覆盖在其它元素之上

css相对定位的示例分享