css中的绝对定位布局及层级与透明效果

最新推荐文章于 2024-04-23 11:04:30 发布

超级马里澳

最新推荐文章于 2024-04-23 11:04:30 发布

阅读量889

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_48802281/article/details/125556556

版权

一、绝对定位元素布局

1.1水平布局

水平方向元素有：left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right

当开启决定定位后，水平方向的布局等式就会加上left，right两个值

当发生过度约束时

1:如果9个值中没有auto，则自动调整right值以使等式满足

2:如果有auto，则自动调整auto的值以使等式满足

可设置auto的值

margin width left right 四个值中，三个值固定，某一个值设为auto，则会调整这个auto值,

若width left right都为0，margin会均分四个方向值

两个auto的情况

margin 和width为auto，调整width

margin 和left，right其中一个值为auto，调整left或right

width 和left，right其中一个值，调整left或right

left，right都为auto 调整right

三个auto的情况

margin width left ===> 调整left

margin width right ===>调整right

width left right ===> 调整right

四个值auto的情况

调整right

总结：调整优先级 right>left>width>margin

1.2垂直布局

bottom、top、height、margin可以对应right、left、width、margin四个值

总结：调整优先级 bottom>top>height>margin

二、层级效果

如果定位元素的层级是一样，则下面的元素会盖住上面的元素，通过z-index属性可以用来设置元素的层级。可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级，层级越高，越优先显示，对于没有开启定位的元素不能使用z-index。

注意：父元素的层级再高，也不会盖住子元素。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      .box1 {
        width: 200px;
        height: 200px;
        background-color: red;
      }
      .box2 {
        width: 100px;
        height: 100px;
        background-color: skyblue;
      }
      .box3{
        width: 100px;
        height: 100px;
        background-color: red;
        position: relative;
        top: 50px;
        z-index: 2;
      }
      .box4{
        width: 100px;
        height: 100px;
        background-color: skyblue;
        position: relative;
        z-index: 3;
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <div class="box2"></div>
    </div>
    <div class="box3"></div>
    <div class="box4"></div>
  </body>
</html>