CSS：定位，边偏移

定位：

定位模式-position：

static：静态定位

标准文档流表现形式一样

fixed：固定定位

相对于body进行定位 -不写偏移量；

脱离文档流；

不再是父元素的100%；

top:0️⃣

relative：相对定位

特性：

一般用在父元素上；

默认宽度依旧是父元素的100%；

相对于自己原本文本流的位置进行定位；

不完全脱离文档流；覆盖在其他盒子之上，其他盒子依旧认为他是存在的，不会占用他原来的位置；

absolute：绝对定位

特性：

相对于最近 附近属性的父级进行定位；

若所有的父级都没有定位 就相对于浏览器窗口进行定位；

完全脱离文档流； 不设置宽度没有宽度 其他元素会占据它原本的空间

fixed：固定定位

特性：

当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动，也不管浏览器窗口大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。

注意：

1、设置了top：0；那么相对于浏览器窗口顶部定位 没加这个属性，相对于body标签的原点进行定位的，所以正常情况下 给元素设置固定定位时一定要加偏移量属性

2、当块级元素设置了绝对定位、固定定位，会导致元素隐式转换为inline-block; 此时元素不会再像block宽度表现为父级的100%，而是需要手动设置100%，这与浮动是一样的，其实是当元素完全脱离文档流时，就需要手动设置

 

z-index　：叠放次序

当多个元素同时设置定位时，定位元素之间有可能发生重叠。

要想调整重叠定位元素的堆叠顺序，可以对定位元素使用z-index层叠等级属性，其取值可为正整数、负整数、0.

注意：

定位元素猜右z-index

  1. 同级:

    1、不加z-index 后来者居上

    2、加z-index 值越大越在上面 如果值相等 还是后来者居上

    <img src="./image/banshou.png" alt="">
  <p>段落</p>
img {
   position: absolute;
   z-index: 99;
}
​
p {
    position: absolute;
    z-index: 9;
}
    View Code

     

  2. 嵌套:

    1、 不加z-index 默认子元素在上

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02-z-index</title>
    <style>
        div {
            width: 200px;
            height: 200px;
        }                     
        .box1 {
            width: 400px;
            height: 300px;
            background-color: red;
        }
        .son {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="son"></div>
    </div>
</body>
</html>
    View Code

     

    2、只给子元素加z-index值<0 可实现父元素为上

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02-z-index</title>
    <style>
        div {
            width: 200px;
            height: 200px;
        }                     
        .box1 {
            width: 400px;
            height: 300px;
            background-color: red;
        }
        .son {
            background-color: yellow;
            position: absolute;
            z-index: -1;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="son"></div>
    </div>
</body>
</html>
    View Code

     

    3、如果给父元素也添加z-index 父元素无论怎样 子元素都将在父元素上

    <!DOCTYPE html>
   <html lang="en">
<head>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>02-z-index</title>
       <style>
           div {
               width: 200px;
               height: 200px;
           }                     
           .box1 {
               width: 400px;
               height: 300px;
               background-color: red;
               position: absolute;
               z-index: 9999;
           }
           .son {
               background-color: yellow;
               position: absolute;
               z-index: -1;
           }
       </style>
   </head>
   <body>
       <div class="box1">
           <div class="son"></div>
       </div>
   </body>
   </html>
    View Code

     

  3. 嵌套+同层级

    1、如果父元素有其他兄弟元素 如果两者都没加z-index 后来者居上

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02-z-index</title>
    <style>
        div {
            width: 200px;
            height: 200px;
        }
        .box1 {
            width: 400px;
            height: 300px;
            background-color: red;
        }
        .son1 {
            background-color: yellow;
        }
        .box2 {
            background-color: black;
            width: 300px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="son1"></div>
    </div>
    <div class="box2"></div>
</body>
</html>
    View Code

     

    2、两者父元素都没加z-index 若某一子元素z-index值大 那么该子元素将显示在上方 如果值相同 则后来者居上

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02-z-index</title>
    <style>
        div {
            width: 200px;
            height: 200px;
        }
        .box1 {
            width: 400px;
            height: 300px;
            background-color: red;
            position: relative;
        }
        .son1 {
            background-color: yellow;
            position: absolute;
            z-index: 6;
        }
        .box2 {
            background-color: black;
            width: 300px;
            height: 400px;
            position: absolute;
            top: 0;
            left: 0;
        }
        .son2 {
            background-color: green;
            position: absolute;
            /* z-index: 6; */
            z-index: 5;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="son1"></div>
    </div>
    <div class="box2">
        <div class="son2"></div>
    </div>
</body>
</html>
    View Code

     

    3、 如果父级都加了z-index 那么在进行比较时 只比较父元素z-index值 值越大则父元素连同里面的子元素越靠上 如果值相等 后来者居上 拼爹

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02-z-index</title>
    <style>
        div {
            width: 200px;
            height: 200px;
        }
        .box1 {
            width: 400px;
            height: 300px;
            background-color: red;
            position: relative;
            z-index: 3;
        }
        .son1 {
            background-color: yellow;
            position: absolute;
            z-index: 6;
        }
        .box2 {
            background-color: black;
            width: 300px;
            height: 400px;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 6;
        }
        .son2 {
            background-color: green;
            position: absolute;
            /* z-index: 6; */
            z-index: 5;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="son1"></div>
    </div>
    <div class="box2">
        <div class="son2"></div>
    </div>
</body>
</html>
    View Code

     

    注意：

    数字后面不能加单位。

    只有相对定位、绝对定位、固定定位有此属性，其余标准流、浮动、静态定位都无此属性。

    flex盒子的子元素也可以设置z-index属性(后面了解)

 

*粘性定位（了解）

粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。

 

边偏移

边偏移属性描述
bottom 底部偏移量，定义元素相对于其父元素下边线的距离
top 顶端偏移量，定义元素相对于其父元素上边线的距离
left 左侧偏移量，定义元素相对于其父元素左边线的距离
right 右侧偏移量，定义元素相对于其父元素右边线的距离

定位要与边偏移一起搭配使用

 

posted on 2022-07-17 10:42  香香鲲  阅读(325)  评论(0)  编辑  收藏  举报

Powered by: 博客园 Copyright © 2024 香香鲲
Powered by .NET 9.0 on Kubernetes