css之定位---static、absolute 、relative、 fixed、sticky

最新推荐文章于 2024-05-21 21:13:29 发布

qq_51985469

最新推荐文章于 2024-05-21 21:13:29 发布

阅读量80

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_51985469/article/details/131973903

版权

static ：遵循基本的定位规定，不能通过z-index进行层次分级。

absolute “脱离文档流，通过 top,bottom,left,right 定位。选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。

relative ：不脱离文档流，参考自身静态位置通过 top(上),bottom（下）,left（左）,right（右）定位，并且可以通过z-index进行层次分级。

fixed 固定定位，这里他所固定的对像是浏览器可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。

sticky：很像relative和fixed的结合：一些时候是relative定位（定位基点是自身默认位置），另一些时候自动变成fixed定位（定位基点是视口）。

粘性定位特点

以浏览器的可视窗口为参照点移动元素（固定定位特点）

粘性定位占有原先的位置（相对定位特点）

必须添加 top 、left、right、bottom 其中一个才有效

粘性定位为什么不起作用

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

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

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

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

demo:

<!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>
    <style>
        .father{
            width: 1000px;
            height: 1900px;
            background-color: tomato;
            margin: 0 auto;
        }
        .son{
            width: 300px;
            height: 30px;
            border: 1px solid #fff;
            position: sticky;
            top: 10px;
        }
        .box{
            margin-top: 100px;
        }

    </style>
</head>
<body>
    <div class="father">
        <div class="son">
            我是一个粘性定位
        </div>
        <div class="box">33333</div>

    </div>
    
</body>
</html>

qq_51985469

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css之定位---static、absolute 、relative、 fixed、sticky

static ：遵循基本的定位规定，不能通过进行层次分级。absolute “脱离文档流，通过 top,bottom,left,right 定位。选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。relative ：不脱离文档流，参考自身静态位置通过 top(上),bottom（下）,left（左）,right（右）定位，并且可以通过z-index进行层次分级。
复制链接

扫一扫