css--position用法

最新推荐文章于 2024-09-15 21:53:51 发布

Zsssssssjjjjj

最新推荐文章于 2024-09-15 21:53:51 发布

阅读量97

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_73957003/article/details/129911496

版权

position四个属性详解

1.position:static;

这个属性是让元素正常布局的元素，也就是说这个元素加了或者没加元素的位置是不变的（此时 top right botton left 和z-index是无效的）。

2.position:relative; ：相对定位

在元素原有的位置上，可以根据设置的`top`,`right`,`botton`,`left`调整元素位置。
不会改变页面的布局，不影响其他元素的偏移，所以会在元素原来位置上留下空白。
position:relative;`对`table-*-group`, `table-row`, `table-column`, `table-cell`, `table-caption` 元素无效

   <style>
        .box {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: red;
            color: #fff;
        }
        #two {
            position: relative;
            top: 30px;
            right: 30px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box">one</div>
    <div class="box" id="two">two</div>
    <div class="box">three</div>
    <div class="box">four</div>
</body>

3.position:absolute; :绝对路径

元素会被移除正常文档流，并不会为元素预留空间。不会像`relative`那样，在元素原来定位留下空白。
绝对定位的元素可以设置为边距（`margins`），且不与其他边距合并。
假设给A元素添加绝对定位，那么A元素就会相对于最近的非`static`定位祖先元素偏移，来确定A元素位置。

    <style>
        .box {
            width: 100px;
            height: 100px;
            display: inline-block;
            background-color: red;
            color: #fff;
        }
        #two {
            position: absolute;
            top: 30px;
            left: 40px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box">one</div>
    <div class="box" id="two">two</div>
    <div class="box">three</div>
    <div class="box">four</div>
</body>

4.position: sticky;：粘性定位

粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。

    <style>
        .box {
            width: 500px;
            border: 1px solid #000;
            height: 100px;
            overflow-y: auto;
        }

        .left {
            width: 300px;
            /* overflow-y: auto; */
        }

        .right {
            width: 100px;
            background-color: green;
            margin-top: 50px;
        }

        .left,
        .right {
            float: left;
        }

        .right {
            position: sticky;
            top: 10px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left">
            寂静的森林里，树木窃窃私语，萤火虫的光不再温暖。鹅卵石铺就的小路上布满了多少人的脚印？我在这里轻轻吟颂着温暖的童话。带着怀表的兔子发着光，领着美丽的爱丽丝，进入神秘的扑克牌仙境，奇妙的经历只是一个梦而已，一切都会结束。冰冷的城墙述说着一个又一个故事，湛蓝的大海是人鱼的眼泪，透明的水晶棺是公主的幸福笑靥，梦幻的蔷薇花翩飞，我的童话又在哪里？
            　　山谷里的声音，让痛苦云淡风清，我聆听着古老的篇章，尘封的记忆在苏醒，漫延的泪水变成故事里的曾经。永远的童话，从一开始便不存在，一切只是幻想，一切只是虚无，镜子里的模样仿佛不再是自己，时间在嘲笑我们的年轻，承诺就像易碎的花瓶。
            童话的书页渐渐合扰，与其相信美丽的梦，我觉得我的生活会更加芬芳。人生像童话，却胜于童话。
        </div>
        <div class="right">导航框</div>
    </div>
</body>