当前位置：网站首页>元素的层级

元素的层级

2022-07-27 12:48:00 【不好意思，此人不存在】

元素的层级

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> body{
      font-size: 50px; } .box1{
      width: 200px; height: 200px; background-color: #bbffaa; position: absolute; /* 在开启了定位元素，可以通过z-index属性来指定元素的层次 z-index需要一个整数作为参数，值越大元素的层级越高 元素的层次越高月优先显示 如果元素的层级一样，则优先显示靠下的元素 祖先元素的层级再高也不会盖住后代元素 */ /* z-index: 1; */ } .box2{
      width: 200px; height: 200px; background-color: rgba(255, 0, 0, .3); position: absolute; top: 50px; left: 50px; /* z-index: 2; */ } .box3{
      width: 200px; height: 200px; background-color: yellow; position: absolute; top: 100px; left: 100px; /* z-index: 3; */ } .box4{
      width: 100px; height: 100px; background-color: orange; position: absolute; } </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3
        <div class="box4"></div>
    </div>
</body>
</html>

-运行一下就知道原理
原网站

版权声明
本文为[不好意思，此人不存在]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_44278908/article/details/114024720

边栏推荐

猜你喜欢

随机推荐