CSS技巧讲解⑤:子元素与父元素的定位配合 - 绝对定位与相对定位实例展示
最编程
2024-07-28 07:43:54
...
一、子元素绝对定位 父元素相对定位
绝对定位 要和 带有定位 的 父容器 搭配使用 ;
子元素 使用绝对定位 , 父元素要使用 相对定位 ;
子元素使用 绝对定位 , 在布局中不会保留其位置 ,
子元素完全依赖 父容器 的位置 ,
此时就要求父容器必须稳定 , 如果父容器使用了 绝对布局 , 父容器就不会保留位置 ,
而子元素又依赖父元素 , 这时父元素建议使用相对定位 , 这样能保证页面的稳定性 ;
父级元素 需要 占位 , 必须使用 相对定位 ;
子元素 需要 任意摆放 , 必须使用绝对定位 ;
二、代码示例
父元素使用相对定位 , 子元素使用绝对定位 ;
两个子元素分别放置在 左侧和右侧 中心位置 ;
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位示例</title>
<style>
/* 父元素设置相对布局 */
.father {
position: relative;
width: 800px;
height: 90px;
background-color: pink;
}
/* 子元素设置绝对布局 */
.son {
/* 绝对布局 */
position: absolute;
/* 放置在左侧中心位置 */
top: 25px;
left: 0;
width: 40px;
height: 40px;
background-color: blue;
}
/* 子元素设置绝对布局 */
.son2 {
/* 绝对布局 */
position: absolute;
/* 放置在右侧中心位置 */
top: 25px;
right: 0;
width: 40px;
height: 40px;
background-color: red;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
<div class="son2"></div>
</div>
</body>
</html>
展示效果 :
推荐阅读
-
网页前端 CSS进阶布局技巧(二):详解5.3 子元素相对定位与父级元素的关系(子绝父相)
-
玩转CSS定位技巧⑥:让子元素在父容器中*浮动 - 绝对定位实战与代码实例
-
理解CSS中的子元素超越父级布局:从相对定位开始讲解
-
CSS技巧讲解⑤:子元素与父元素的定位配合 - 绝对定位与相对定位实例展示
-
在CSS中理解并运用子元素的绝对定位与父级元素的相对定位(子绝父相)
-
CSS布局技巧:定位方法详解 - 相对定位、绝对定位、子元素与父容器的定位模式、固定定位,以及它们之间的层级关联
-
HTML+CSS实战指南第151节:深入理解定位 - 子元素相对定位与父级元素绝对定位
-
理解CSS布局中的position属性(子元素相对定位与父元素绝对定位)
-
让子元素根据父元素自动适应并实现绝对定位的技巧(子级脱离相对定位,父级高度自适配)
-
理解CSS中的position属性(子元素与父元素布局原理) - 定位顺序与z-index的应用