CSS布局之定位布局

最新推荐文章于 2022-11-21 22:51:15 发布

鴎鴎鹿鸣

最新推荐文章于 2022-11-21 22:51:15 发布

阅读量150

点赞数

文章标签： html5 css

本文链接：https://blog.csdn.net/gfhdgo/article/details/119740917

版权

一、静态定位（ Static positioning）

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

position: static;

二、相对定位（ Relative positioning ）

相对定位就是相对于自己以前在标准流中的位置来移动 position: relative; 使top,right,bottom,left来控制。单独使用相对定位很少，大部分都是和绝对定位一起使用，形成子绝父相。

注意点：

相对定位是不脱离标准流的, 会继续在标准流中占用一份空间
在相对定位中同一个方向上的定位属性只能使用一个
由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素
由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局

三、绝对布局（Absolute positioning）

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

绝对定位的规律：

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

2.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点.(定位流是指绝对定位absolute/相对定位relative/固定定位fixed ,除了静态定位static)

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

注意点：

1绝对定位的元素是脱离标准流的

2.绝对定位的元素是不区分块级元素/行内元素/行内块级元素

3.如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点

4.一个绝对定位的元素会忽略祖先元素的padding

<style>
        * {
            margin: 0;
            padding: 0;
        }

        .div1,
        .div2 {
            width: 600px;
            height: 300px;
            background-color: red;
            margin: 0 auto;
            position: relative;
        }

        .div2 {

            background-color: green;
            /* 在父元素中使用相对定位 */
            position: relative;
        }

        .div3 {
            width: 100px;
            height: 100px;
            background-color: blue;
            /* 在子元素中使用绝对定位 */
            position: absolute;
            top: 50%;
            left: 10px;
            margin-top: -50px;
        }

        .div4 {
            width: 100px;
            height: 100px;
            background-color: blue;
            /* 在子元素中使用绝对定位 */
            position: absolute;
            top: 50%;
            right: 10px;
            margin-top: -50px;
        }

        /* 使用定位实现水平和垂直居中 */
        .div5 {
            width: 100px;
            height: 100px;
            background-color: blue;
            /* 在子元素中使用绝对定位 */
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;
        }
    </style>
</head>

<body>
    <div class="div1">
        <div class="div5"></div>
    </div>
    <div class="div2">
        <div class="div3"></div>
        <div class="div4"></div>
    </div>

</body>

绝对定位-子绝父相

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

绝对定位水平居中

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

四、固定定位（Fixed positioning）

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

注意点: 

1.固定定位的元素是脱离标准流的, 不会占用标准流中的空间 2.固定定位和绝对定位一样不区分行内/块级/行内块级

五、粘滞定位（Sticky positioning）

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

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

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

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

亦即如果设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动（此时相当于fixed定位）。

注意点：

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

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

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

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

鴎鴎鹿鸣

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS布局之定位布局

一、静态定位（ Static positioning）是所有元素的默认定位方式。意味着将一个元素定位在默认文档流中。 position: static;二、相对定位（ Relative positioning ）相对定位就是相对于自己以前在标准流中的位置来移动 position: relative; 使top,right,bottom,left来控制。单独使用相对定位很少，大部分都是和绝对定位一起使用，形成子绝父相。注意点：相对定位是不脱离标准流的,...
复制链接

扫一扫