css定位

最新推荐文章于 2024-09-27 11:01:06 发布

lxl211

最新推荐文章于 2024-09-27 11:01:06 发布

阅读量207

点赞数

分类专栏： css 文章标签： css 前端 css3

本文链接：https://blog.csdn.net/lxllxl211/article/details/128835157

版权

css 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

文章详细介绍了CSS中的三种定位方式：相对定位、绝对定位和固定定位。相对定位是基于元素自身位置移动，不脱离标准流；绝对定位依据最近的定位祖先元素，无定位祖先则基于浏览器；固定定位始终相对于浏览器视口。此外，还提到了元素层级问题，z-index用于控制定位元素的堆叠顺序。

摘要由CSDN通过智能技术生成

1、相对定位

介绍：自恋型定位相对于自己之前的位置进行移动
代码: position:relative;

特点:
1、需要配合方位属性实现移动
2、相对于自己原来位置进行移动
3、在页面中占位置一没有脱标
4、盒子仍然具有标签原来的显示模式特点
5、盒子加position:relative;后，如果不加方位名词，盒子是不会变化的

应用场景:
1.配合绝对定位组CP(子绝父相)
2.用于小范围的移动

    <style>
        .box{
            position: relative;
            left: 100px;
            top: 100px;
            height: 100px;
            width: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <div class="box"></div>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
</body>

粉色盒子相对于自己原先的位置向右向下移动了100px。他原先的位置没有被其他标签占领
在这里插入图片描述
相对定位占有自己原先的位置，人走茶不凉

2、绝对定位

绝对定位是元素在移动的时候，是相对他祖先的元素来说的（拼爹型）
绝对定位的盒子具有行内块元素的特点:加宽度高度生效,如果只有宽度,则整个盒子将因为没有高度而隐形

        <style>
            .father{
                height: 100px;
                width: 100px;
                /*以相对定位举例*/
                position: relative;
            }
            .son{
                position: absolute;
                left: 0;
                top: 0;
                height: 100px;
                width: 100px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <div class="father">
            <div class="son"></div>
        </div>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
    </body>
    </html>
</body>

如果父亲有定位,则以父亲为基准移动
在这里插入图片描述
如果父亲没有定位,则以父亲的父亲为基础,如果所有的父亲都没有定位,则以浏览器为基准
把父盒子注释了

<style>
            /* .father{
                height: 100px;
                width: 100px;
                position: relative;
            } */
            .son{
                position: absolute;
                left: 50px;
                top: 50px;
                height: 100px;
                width: 100px;
                background-color: pink;
            }
</style>

这个盒子就是以浏览器为基准进行移动的
在这里插入图片描述

3固定定位

介绍:死心眼型定位，相对于浏览器进行定位移动代码:position:fixed;

特点:
1.需要配合方位属性实现移动
2.相对于浏览器可视区域进行移动
3.在页面中不占位置一已经脱标

应用场景:
1.让盒子固定在屏幕中的某个位置

 <style>
            .son {
                position: fixed;
                top: 0;
                height: 100px;
                width: 100px;
                background-color: pink;
            }
        </style>
    </head>

    <body>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>

        <div class="son"></div>

        <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位</p>

    </body>