CSS定位

最新推荐文章于 2022-10-03 19:55:37 发布

C_Cercis Chinensis

最新推荐文章于 2022-10-03 19:55:37 发布

阅读量79

点赞数

分类专栏：笔记文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_43128157/article/details/124554555

版权

笔记专栏收录该内容

37 篇文章 0 订阅

订阅专栏

文章目录

定位

定位

属性

top 定位框的顶部外边距边缘
right 定位框的右侧外边距边缘
bottom 定位框的底部外边距边缘
left 定位框的左侧外边距边缘
clip 剪裁绝对定位的元素
z-index 元素的堆叠顺序
- 可设置正或负的堆叠顺序，具有较高堆叠顺序的元素始终位于具有较低堆叠顺序的元素之前
- 两个定位元素重叠而未指定z-index，则位于HTML代码中最后的元素将显示在顶部
position 元素的定位类型
- static
- relative
- absolute
- fixed
- sticky

position

static

默认情况下，HTML元素的定位方式为static（静态）。
静态定位元素不受top、right、bottom、left属性的影响。
不以任何特殊形式定位，根据页面的正常流进行定位。

<style>
    header,
    footer {
        height: 50px;
        width: 100%;
        border: 2px solid green;
    }
    
    .center {
        display: flex;
        height: 200px;
        position: relative;
        justify-content: space-between;
        align-items: center;
    }
    
    .center div {
        width: 500px;
        height: 150px;
        border: 2px solid red;
        margin: 2px;
    }
    
    .position {
        position: static;
        bottom: 20px;
        left: 30px;
        background-color: pink;
    }
</style>

<body>
    <header>header</header>
    <div class="center">
        <div>1</div>
        <div class="position">2</div>
        <div>3</div>
    </div>
    <footer>footer</footer>
</body>

在这里插入图片描述

relative

相对定位的元素相对其正常位置进行定位
设置相对定位的元素的top、right、bottom、left属性将导致其偏离其正常位置进行定位，不会对其余内容进行调整来适应元素留下的任何空间。即相对定位的元素仍然占据其原本的位置

 .position {
        position: relative;
        bottom: 50px;
        left: 70px;
        background-color: pink;
    }

在这里插入图片描述

absolute

相对于最近的定位（除static以外的position属性）祖先元素进行定位
如果没有祖先，适应文档主体，并跟随页面滚动
脱离文档流，在页面中没有占据原本的位置

/*没有定位祖先*/
.position {
        position: absolute;
        top: 50px;
        right: 70px;
    }

在这里插入图片描述

/*相对于定位祖先定位*/   
   .center {
        display: flex;
        height: 200px;
        justify-content: space-around;
        align-items: center;
        position: relative|absolute|fixed|sticky;
    }
    
    .position {
        position: absolute;
        top: 50px;
        right: 70px;
    }

在这里插入图片描述

fixed

相对于视口定位，即页面滚动，该元素始终位于同一位置，不随页面滚动
设置相对定位的元素的top、right、bottom、left属性将导致其偏离其正常位置进行定位
脱离文档流，在页面中没有占据原本的位置

.position {
        position: fixed;
        bottom: 50px;
        left: 70px;
    }

在这里插入图片描述

sticky

根据用户的滚动位置进行定位，粘性元素根据滚动位置在相对（relative）和固定（fixed）定位之间切换。
最开始为相对定位，直到在视口中遇到给定的偏移位置，将其固定定位在适当的位置

初始为相对定位

在这里插入图片描述

达到偏移位置，为固定定位

在这里插入图片描述

C_Cercis Chinensis

关注

0
点赞
踩
0

收藏

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

文章目录定位属性positionstaticrelativeabsolutefixedsticky定位属性top 定位框的顶部外边距边缘right 定位框的右侧外边距边缘bottom 定位框的底部外边距边缘left 定位框的左侧外边距边缘clip 剪裁绝对定位的元素z-index 元素的堆叠顺序可设置正或负的堆叠顺序，具有较高堆叠顺序的元素始终位于具有较低堆叠顺序的元素之前两个定位元素重叠而未指定z-index，则位于HTML代码中最后的元素将显示在顶部position 元素的
复制链接

扫一扫