CSS定位

最新推荐文章于 2024-11-01 16:54:21 发布

C_Cercis Chinensis

最新推荐文章于 2024-11-01 16:54:21 发布

阅读量97

点赞数

分类专栏：笔记文章标签： 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
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录