CSS定位布局：静态定位、相对定位、绝对定位、固定定位、粘滞定位、Z-index定位

最新推荐文章于 2024-07-07 17:22:42 发布

The..Fuir

最新推荐文章于 2024-07-07 17:22:42 发布

阅读量4.8k

点赞数 4

分类专栏： html css 文章标签： css html javascript

本文链接：https://blog.csdn.net/qq_51066068/article/details/123574175

版权

html 同时被 2 个专栏收录

50 篇文章 6 订阅

订阅专栏

css

45 篇文章 6 订阅

订阅专栏

目录

1.定位布局

1.1.静态定位（ Static positioning）

简单代码实现：

- 1.2.什么是相对定位?（ Relative positioning ）

简单代码实现：

- 1.3.什么是绝对定位?（Absolute positioning）

- 绝对定位参考点

效果图：

-绝对定位水平居中

- 1.4.固定定位（Fixed positioning）

- 1.5.粘滞定位（ Sticky positioning ）

position: sticky;

效果图：京东的网页

效果图：

- 1.6.z-index

效果图：

1.从父现象 

效果图：

1.定位布局

- 定位流分类

1.1.静态定位

1.2.相对定位

1.3.绝对定位

1.4.固定定位

1.5.粘滞定位

1.6.z-index

1.1.静态定位（ Static positioning）

是所有元素的默认定位方式。意味着将一个元素定位在默认文档流中。

position: static;

简单代码实现：

<!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>静态定位</title>
</head>
<body>
    <div class="first">静态定位</div>
    <div class="second">静态定位的相邻元素</div>
</body>
</html>
<style>
    .first{
        width: 100px;
        height: 100px;
        background-color: pink;
        /* 静态定位 */
        position: static;
        /* margin-bottom: 50px; */
        float: left;
    }
    .second{
        width: 50px;
        height: 50px;
        background-color: blue;
        float: left;
    }
</style>

- 1.2.什么是相对定位?（ Relative positioning ）

相对定位就是相对于自己以前在标准流中的位置来移动 position: relative; 使用top,right,bottom,left来控制

- 相对定位注意点

相对定位是不脱离标准流的, 会继续在标准流中占用一份空间

在相对定位中同一个方向上的定位属性只能使用一个

由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素

由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局

- 相对定位应用场景

用于对元素进行微调

配合后面学习的绝对定位来使用

简单代码实现：
<!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>Document</title>
</head>
<body>
    
    <div class="realtive"></div>
</body>
</html>
<style>
    .realtive{
        width: 100px;
        height: 100px;
        background-color: black;
        position: relative;
        /* 相对定位 结合top left right bottom来设置 */
        left: 100px;
        top: 100px;
    }
</style>

- 1.3.什么是绝对定位?（Absolute positioning）

绝对定位就是相对于body来定位 position: absolute;

- 绝对定位参考点

1.规律默认情况下所有的绝对定位的元素, 无论有没有祖先元素, 都会以body作为参考点

2.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点。 2.1只要是这个绝对定位元素的祖先元素都可以 2.2指的定位流是指绝对定位/相对定位/固定定位 2.3定位流中只有静态定位不行

3.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 而且祖先元素中有多个元素都是定位流, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点。

-绝对定位注意点

1.绝对定位的元素是脱离标准流的 2.绝对定位的元素是不区分块级元素/行内元素/行内块级元素 3.如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点 4.一个绝对定位的元素会忽略祖先元素的padding

- 绝对定位-子绝父相

相对定位弊端: 相对定位不会脱离标准流, 会继续在标准流中占用一份空间, 所以不利于布局界面绝对定位弊端: 默认情况下绝对定位的元素会以body作为参考点, 所以会随着浏览器的宽度高度的变化而变化子绝父相子元素用绝对定位, 父元素用相对定位

-绝对定位水平居中

只需要设置绝对定位元素的left:50%; 然后再设置绝对定位元素的 margin-left: -元素宽度的一半px;

效果图：

原因：脱离文档流，不在标准流中，所以蓝色的会去到它的上边

<!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>Document</title>
</head>
<body>
    <!-- 脱离文档流，不在标准流中的 -->
    <!-- 只设置自身绝对定位时，元素会参照body(浏览视口区)来定位 -->
    <!-- 结合相对定位使用 -->
    <!-- 1.祖先元素（祖先相对，子孙绝对）
    2.就近原则：  当祖先元素中都有定位流（相对、固定、绝对），参考就近原则，直接父亲有相对定位时，一定会优先参照父亲定位
    当祖先元素只有一个相对定位时，则参照这仅有的一个定位来移动 
    父相子绝
    3.当祖先元素，如有祖先元素直接设置padding,则会忽略掉-->
 <!-- 爷爷辈的 -->
<div class="grandfather">
     <!-- 父亲相对定位 -->
     <div class="father">
         <!-- 子女绝对定位 -->
        <div class="first">
            测试绝对定位
        </div>
        <div class="second">第二个孩子</div>
    </div>
</div>

</body>
</html>
<style>
    .grandfather{
        width: 800px;
        height: 800px;
        border: 2px solid yellow;
        margin-top: 80px;
        margin-left: 80px;
         /* position: relative; */
    }
    .father{
        width: 500px;
        height: 500px;
        border: 2px solid black;
        position: relative;
        margin-top: 100px;
        margin-left: 100px;
    }
    .first{
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        top: 50px;
    }
    .second{
        width: 100px;
        height: 100px;
        background-color:pink;  
    }
</style>

这两个再交换位置后就是：

就近原则：当祖先元素中都有定位流（相对、固定、绝对），参考就近原则，直接父亲有相对定位时，一定会优先参照父亲定位当祖先元素只有一个相对定位时，则参照这仅有的一个定位来移动

当祖先元素（直接父级之外），如有祖先元素直接设置padding, 则忽略这个值，只需要关注自身绝对定位结合相对偏移即可

所以就是100px

-绝对定位水平居中

只需要设置绝对定位元素的left:50%; 然后再设置绝对定位元素的 margin-left: -元素宽度的一半px;

<!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>Document</title>
</head>
<body>
    <div class="juedui"></div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div class="test"></div>
</body>
</html>
<style>
    .juedui{
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        left: 50%;
        margin-left: -50px;
    }
    .test{
        width: 100px;
        height: 100px;
        background-color: pink;
        margin: 0 auto;
    }
</style>

这也是水平居中的一种方式

- 1.4.固定定位（Fixed positioning）

1.什么是固定定位?

 position: fixed; 

固定定位和前面学习的背景关联方式很像, 背景定位可以让背景图片不随着滚动条的滚动而滚动, 而固定定位可以让某个盒子不随着滚动条的滚动而滚动。

注意点:

1.固定定位的元素是脱离标准流的, 不会占用标准流中的空间

2.固定定位和绝对定位一样不区分行内/块级/行内块级
<!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>Document</title>
</head>
<body>
    <div class="juedui"></div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div class="test"></div>
    <br>
    <br>
    <br>
    <br>
    <div class="fixed"></div>
    <div class="test2"></div>
</body>
</html>
<style>
    .juedui{
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        left: 50%;
        margin-left: -50px;
    }
    .test{
        width: 100px;
        height: 100px;
        background-color: pink;
        margin: 0 auto;
    }
    .fixed{
        width: 800px;
        height: 800px;
        background-color: black;
        position: fixed;
        opacity: 0;
    }
    .test2{
        width: 300px;
        height: 300px;
        background-color: green;
    }
</style>
1.固定定位的元素是脱离标准流的, 不会占用标准流中的空间

所以中间的黑色部分不占空间

- 1.5.粘滞定位（ Sticky positioning ）

position: sticky;

结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特殊场景。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

设置了position: sticky的元素并不脱离文档流，仍然保留元素原本在文档流中的位置。

当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。

亦即如果设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上

移动（此时相当于fixed定位）。

设置 position:sticky 同时给一个 (top,bottom,right,left) 之一即可

使用条件：

父元素不能overflow:hidden或者overflow:auto属性。

必须指定top、bottom、left、right4个值之一，否则只会处于相对定位

父元素的高度不能低于sticky元素的高度

sticky元素仅在其父元素内生效

效果图：京东的网页

在实际运用非常多：
<!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>粘滞定位</title>
    
</head>
<body>
    <div class="father">
        <div class="son"></div>
        <div class="son1"></div>
    </div>
</body>
</html>
<style>
    .father{
        width: 800px;
        height: 600px;
        margin-top: 50px;
        margin-left: 300px;
        border: 2px solid black;
        position: relative;
        /* 滚动条 */
        overflow: scroll;
    }
    .son{
        width: 100px;
        height: 100px;
        margin-top: 100px;
        margin-left: 300px; 
        margin-bottom: 50px;
        background-color:green;
        /* 粘滞定位 */
        position: sticky;
        top: 50px;
    }
    .son1{
        width: 100px;
        height: 600px;
        background-color: yellow;
        margin-left: 300px; 
    }
</style>
效果图：

- 1.6.z-index

1.什么是z-index属性?

默认情况下所有的元素都有一个默认的z-index属性, 取值是0. z-index属性的作用是专门用于控制定位流元素的覆盖关系的

2.默认情况下定位流的元素会盖住标准流的元素

元素的层级结构显示：定位流>z-index值大的>普通流

3.默认情况下定位流的元素后面编写的会盖住前面编写的

4.如果定位流的元素设置了z-index属性, 那么谁的z-index属性比较大, 谁就会显示在上面注意点:

1.从父现象

1.1如果两个元素的父元素都没有设置z-index属性, 那么谁的z-index属性比较大谁就显示在上面。

1.2如果两个元素的父元素设置了z-index属性, 那么子元素的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>Document</title>
</head>
<body>
    <div class="grandfather">
        <div class="father"></div>
    </div>
    <div class="grandfather">
        <div class="brother"></div>
    </div>
    
</body>
</html>
<style>
    .father{
        width: 200px;
        height: 200px;
        background-color:green; 
        /* 默认在定位流中（相对、绝对、固定），z-index的值谁大谁显示在上面 */
        position: relative;
        z-index: 1;
    }
    .brother{
        width: 100px;
        height: 100px;
        height: 100px;background-color: red;
        margin-top: -50px;
        position: absolute;
        z-index: 2;
    }
</style>

效果图：

若不设置：

则会变成：

1.从父现象

1.1如果两个元素的父元素都没有设置z-index属性, 那么谁的z-index属性比较大谁就显示在上面。

 1.2如果两个元素的父元素设置了z-index属性, 那么子元素的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>Document</title>
</head>
<body>
    <!-- 前提所有设置z-index的属性必须在定位流中（定位流回显示在普通文件流上 -->
    <!-- 当两个元素的父元素都没有设置z-index值得时候，子元素的z-index值发挥
    作用时，谁大谁在上 -->
    <!-- 当两个父元素都设置了z-index值的时候，从父z-index值 -->
    <div class="grandfather">
        <div class="brother1"></div>
    </div>
    <div class="grandfather1">
        <div class="brother2"></div>
    </div>
    
</body>
</html>
<style>
    .grandfather{
        width: 300px;
        height: 300px;
        background-color: pink;
        position: relative;
        z-index: 3;
    }
    .grandfather1{
        width: 300px;
        height: 300px;
        background-color: rgb(192, 255, 220);
        position: relative;
        z-index: 4 ;
    }
    .brother1{
        width: 200px;
        height: 200px;
        background-color:green; 
        /* 默认在定位流中（相对、绝对、固定），z-index的值谁大谁显示在上面 */
        position: relative;
        z-index: 2;
    }
    .brother2{
        width: 100px;
        height: 100px; 
        height: 100px;background-color: red;
        margin-top: -50px;
        position: absolute;
        z-index: 4;
    }
</style>

效果图：

The..Fuir

关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
CSS定位布局：静态定位、相对定位、绝对定位、固定定位、粘滞定位、Z-index定位

目录1.定位布局1.1.静态定位（ Static positioning）简单代码实现：- 1.2.什么是相对定位?（ Relative positioning ）简单代码实现：- 1.3.什么是绝对定位?（Absolute positioning）- 绝对定位参考点效果图：-绝对定位水平居中- 1.4.固定定位（Fixed positioning）- 1.5.粘滞定位（ Sticky positioning ）position: sticky;...
复制链接

扫一扫