CSS position 属性

最新推荐文章于 2023-02-24 20:04:16 发布

hanso_o

最新推荐文章于 2023-02-24 20:04:16 发布

阅读量229

点赞数

分类专栏： html css 属性文章标签： css position属性

本文链接：https://blog.csdn.net/m0_38035497/article/details/78071714

版权

html 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

属性

1 篇文章 0 订阅

订阅专栏

position 属性规定元素的定位类型

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行定位。

1.static
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）

2.absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

3.relative
生成相对定位的元素，相对于其原位置进行定位。
因此，”left:20” 会将元素的相对原位置向左偏移 20 像素。

4.fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。

5.inherit
规定应该从父元素继承 position 属性的值

举例说明（未与float并用）

postion:relative
该元素原位置依然保留，
使用定位关键字left/right/top/bottom 进行移动（相对自己原位置）
兄弟块元素之间定位是基于该元素移动前的位置（不受该元素影响）

关键点：
相对自己原位置，兄弟元素不受影响

演示代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>postion:relative演示代码</title>
            <style>
            * {
                border: 1px solid #eee;
            }

            body {
                border-color: #09f;
            }

            ul {
                list-style: none;
                width: 800px;
                height: 400px;
                margin: 0 auto;
                border-color: black;
            }

            li {
                width: 200px;
                height: 100px;
                position: relative;

            }

            #li1 {
                border-color: red;
                /*将下面注释 逐一清除即可看出效果*/
                /*top: 20px;*/
                /*left: 100px;*/
            }

            #li2 {
                border-color: green;
            }

            #li3 {
                border-color: blue;
            }
        </style>
    </head>

    <body>


        <ul id=#id>
            <li id=li1>li1</li>
            <li id=li2>li2</li>
            <li id=li3>li3</li>
        </ul>
    </body>

</html>