CSS实现两个层重叠与显示

Joe.Ye • 2023-02-23 • 前端基础

position有以下属性：static、inherit、fixed、absolute、relative

  • static：是默认状态，没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
  • inherit：从父元素继承 position 属性的值
  • fixed：生成绝对定位的元素，相对于浏览器窗口进行定位（即滚动浏览器时，元素永远固定显示在窗口可视区的某个位置）
  • absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位
  • relative：生成相对定位的元素，相对于其正常位置进行定位

两者最核心的区别在于：absolute不受父元素里的其他元素影响，而relative会受到父元素里的其他元素影响

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
#father{
    position:relative;/*父盒子位置要用relative*/
    margin:20px auto;
    width:400px;
    height:100px;
    border:1px solid red;
    }
#father #a{
    position:absolute;/*子盒子位置要用absolute*/
    width:100%;
    height:50px;
    background:blue;
    opacity:0.6;
    z-index:2;
    }
#father #b{
    position:absolute;/*子盒子位置要用absolute*/
    width:100%;
    height:80px;
    background:#F4AF19;
    text-align:right;
    z-index:1;
    }
</style>
</head>
<body>
<!--按上面的CSS定位方法布局就会重叠，那个子盒子在前面用Z-INDEX 决定-->
<div id="father">
    <div id="a">我是A盒子</div>
    <div id="b">我是B盒子</div>
</div>
</body>
</html>

版权声明：
作者：Joe.Ye
链接：https://www.appblog.cn/index.php/2023/02/23/css-implement-two-layers-to-overlap-and-display/
来源：APP全栈技术分享
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
打赏
海报
CSS实现两个层重叠与显示
position有以下属性：static、inherit、fixed、absolute、relative static：是默认状态，没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或……
<<上一篇
下一篇>>
文章目录
关闭
目 录