css子元素如何相对父元素定位？-木庄网络博客

2022-03-23 08:47:47 PHP中文网 JavaScript 百度已收录

本文摘自PHP中文网，作者青灯夜游，侵删。

在css中，可以使用position属性，通过给父元素设置相对定位“position:relative;”样式，给子元素设置绝对定位“position:absolute;”样式来实现子元素相对父级元素定位。

本教程操作环境：windows7系统、css2版，该方法适用于所有品牌电脑。

相关推荐：《编程视频课程》

css中子元素相对父元素定位的实现方法

父级元素样式设置：

1	`position:relative;`

子元素样式：

1	`position:absolute;`

示例代码：

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

效果

相关阅读 >>

更多相关阅读请进入《css》频道 >>

书籍

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » css子元素如何相对父元素定位？

相关推荐

评论