定位（设置盒子的位置）

一个尚在学习的计算机小白

于 2023-07-27 09:35:39 发布

阅读量342

点赞数

分类专栏：前端文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/qq_52396030/article/details/131953025

版权

前端专栏收录该内容

14 篇文章

订阅专栏

本文介绍了CSS中的四种定位方式：绝对定位使元素相对于浏览器第一屏定位；相对定位是基于元素原本的位置；固定定位在滚动页面时保持元素在屏幕的特定位置；粘性定位则在达到特定阈值时变为固定。此外，还讨论了如何实现水平和垂直居中布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    .box1{
        /* 绝对位置，和父元素的相对位置,参照物是浏览器的第一屏位置 */
        background-color: red;
        position: absolute;
        top: 100px;
        left: 100px;
        /* 设置层级，两个盒子重叠部分显示层级大的盒子 */
        z-index: 1;
    }
    .box2{
        background-color: blue;
        /* 相对定位 */
        /* 距离原来位置顶端100px，左端距离100px */
        position: relative;
        top: 100px;
        left: 100px;
    }
    .box3{
        background-color: green;
        /* 固定定位，显示位置随着拉滚动条，在屏幕上的位置不变 */
        position: fixed;
        top: 100px;
        left: 100px;
    }
    .box4{
        background-color: black;
        /* 粘性定位,距离顶端还有10px时开始保持不动 */
        position: sticky;
        top: 10px;
    }
    .box5{
        background-color: aqua;
        /* 水平方向居中 */
        margin: 0 auto;
    }
    .box6{
        background-color: yellow;
        /* 垂直方向居中 随着滚动轴移动*/
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -100px;
    }