当前位置：网站首页>Hierarchy of elements

Hierarchy of elements

2022-07-27 13:22:00 【Sorry, this person doesn't exist】

The hierarchy of elements 

<!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; /*  The positioning element is turned on at , Can pass z-index Attribute to specify the hierarchy of elements  z-index You need an integer as an argument , The higher the value, the higher the level of the element   The higher the level of the element, the month will be displayed first   If the levels of the elements are the same , The lower elements are shown first   No matter how high the level of the ancestor element is, it will not cover the descendant element  */ /* 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>

- You will know the principle once you run it
原网站

版权声明
本文为[Sorry, this person doesn't exist]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/208/202207271110149388.html

边栏推荐

猜你喜欢

随机推荐