定位全解(绝对，相对，固定，粘性定位)

最新推荐文章于 2022-08-05 20:55:57 发布

DangR-Jisoo

最新推荐文章于 2022-08-05 20:55:57 发布

阅读量1.5k

点赞数 1

分类专栏：前端基础 CSS样式

本文链接：https://blog.csdn.net/Angela_Connie/article/details/110089113

版权

前端基础同时被 2 个专栏收录

30 篇文章 1 订阅

订阅专栏

CSS样式

15 篇文章 0 订阅

订阅专栏

定位全解(绝对，相对，固定，粘性定位)

一. 绝对定位(position: absolute)
绝对定位是元素在移动的时候，相对于其父亲来说的(拼爹型)，若无父元素，按其祖先元素，如其父元素或祖先元素无定位，则以浏览器为主

元素设置绝对定位后，不再占有原来的位置，其他的元素会涌上来，而且设置绝对定位会压住下面的标准流

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box1 {
            position: absolute;
            top: 10px;
            left: 10px;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        
        .box2 {
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
</style>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

在这里插入图片描述
从运行结果来看，绝对定位的元素确实不再占有原来的位置，因为黄色的盒子从下面的位置涌上来了，而且浮动的元素压住了下面的黄色的盒子(标准流)

二. 相对定位(position: relative)
相对定位是元素在移动的时候相对于它原来的位置(自恋型)

原来在标准流的位置会继续占有，其他的元素不会涌上来，后面的元素不会影响原来的位置

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box1 {
            position: relative;
            top: 10px;
            left: 10px;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        
        .box2 {
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
</style>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

在这里插入图片描述
由上面的运行结果可以看出原来的位置还在，而且下面的黄色的元素没有涌上来

三. 固定定位(position: fixed)
以浏览器的可视窗口为参照点移动元素

原来在标准流的位置会继续占有，后面的盒子不会影响原来的位置

四. 粘性定位(了解)
以浏览器的可视窗口为参照点移动元素
原来在标准流的位置会继续占有，后面的盒子不会影响原来的位置，其中有一个边偏移才有效果，含义是：当元素的某个位置移动某个距离之后就会固定不动

<style>
        body {
            height: 3000px;
        }

        .nav {
            position: sticky;
            top: 0;
            /* 当元素距顶部像素为0时就固定 */
            width: 800px;
            height: 50px;
            background-color: chartreuse;
            margin: 100px auto;
        }
</style>
<body>
    <div class="nav">我是导航栏</div>
</body>

DangR-Jisoo

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
定位全解(绝对，相对，固定，粘性定位)

定位全解(绝对，相对，固定，粘性定位)一. 绝对定位(position: absolute)绝对定位是元素在移动的时候，相对于其父亲来说的(拼爹型)，若无父元素，按其祖先元素，如其父元素或祖先元素无定位，则以浏览器为主元素设置绝对定位后，不再占有原来的位置，其他的元素会涌上来，而且设置绝对定位会压住下面的标准流<style> * { margin: 0; padding: 0; }
复制链接

扫一扫