首页 > 其他分享> 文章详细

CSS：定位，边偏移

2022-07-17 11:03:06 阅读：189 来源： 互联网

标签：定位 index color 元素 height 偏移 background 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、不加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

嵌套:

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

嵌套+同层级

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	右侧偏移量，定义元素相对于其父元素右边线的距离

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

标签：定位,index,color,元素,height,偏移,background,CSS
来源： https://www.cnblogs.com/LIXI-/p/16486073.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS：定位，边偏移

定位：

定位模式-position：

static：静态定位

fixed：固定定位

relative：相对定位

absolute：绝对定位

fixed：固定定位

z-index ：叠放次序

*粘性定位（了解）

边偏移

z-index　：叠放次序