CSS定位-static、fixed、relative、absolute用法及实例

最新推荐文章于 2023-02-06 10:33:48 发布

heitu_

最新推荐文章于 2023-02-06 10:33:48 发布

阅读量455

点赞数

分类专栏： CSS 文章标签： css html html5

本文链接：https://blog.csdn.net/heitu_/article/details/128468625

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

position属性：

值	说明
static	静态定位，默认属性
fixed	固定定位，相对于浏览器窗口进行定位
relative	相对定位，相对于自己之前的位置
absolute	绝对定位，相对于父元素的定位

一、静态定位(static)

static是position默认值，一般不常用

二、固定定位(fixed)

position:fixed相对于浏览器固定位置，不会随着滚条滚动而改变位置

常用场景：导航栏、弹窗广告

导航栏实例：

<style>
        .nav{
            width: 1000px;
            height: 50px;
            text-align: center; //文字居中
            line-height: 50px;  //文字居中
            background-color: skyblue;
            position: fixed;  //固定idngwei
            top: 0;
            left:500px;
            display: flex;  //子元素平均分配
        }
        span{
            flex: 1; //子元素平均分配
            cursor: pointer; //鼠标碰到变小手
            border-right: 1px solid rgb(216, 156, 156);
        }
        .box{
            width: 500px;
            height: 1500px;
            margin: 150px auto ; //版心居中
            background-color: pink;
        }
</style>
<body>
    <div class="nav">
        <span>Home</span>
        <span>Html</span>
        <span>Css</span>
        <span>JavaScript</span>
    </div>
    <div class="box">

    </div>
</body>

效果图：

移动前移动后

弹窗实例：

<style>
         .box{
            width: 500px;
            height: 1200px;
            margin: 150px auto ; //版心居中
            background-color: pink;
        }
        .window{
            width: 150px;
            height: 150px;
            background-color: skyblue;
            position: fixed;
            top:120px;
            left:0;
            
        }
</style>
<body>
    <div class="box"></div>
    <div class="window"></div> //弹窗
</body>

效果图：

移动前移动后

三、相对定位(relative)

position:relative,相对于自己的位置移动位置，原来的位置会被保留下来

实例：

<style>
        .before{
            width: 120px;
            height: 120px;
            background-color: pink;
        }
        .after{
            width: 120px;
            height: 120px;
            background-color: skyblue;
            position: absolute;
            top: 20px;
            left: 20px;
        }
</style>
<body>
    <div class="before">before</div>
    <div class="after">after</div>
    <span>我在这里</span>
</body>

效果图：

未设置position

设置相对定位

*可以看出相对定位，原来的位置保留

四、绝对定位(absolute)

position:absolute,相对于父元素的位置移动位置，原来的位置不会被保留下来

实例(跟相对定位案例对比)：

<style>
        .before{
            width: 120px;
            height: 120px;
            background-color: pink;
        }
        .after{
            width: 120px;
            height: 120px;
            background-color: skyblue;
            position: absolute;//绝对定位
            top: 20px;
            left: 20px;
        }
</style>
<body>
    <div class="before">before</div>
    <div class="after">after</div>
    <span>我在这里</span>
</body>

效果图：

设置绝对定位

五、子绝父相具体例子

说明：用于产品展示的new小标签

<style>
        .box{
            width: 200px;
            height: 250px;
            border: 1px solid black;
            margin-top: 10px;
            position: relative; //父相
            top:20px;
            left: 20px;
        }
        span{
            margin-left: 20px;
        }
        span:last-child{
            color: red;
            margin-top:15px;
        }
        .new{
            position: absolute;  //子绝
            top: 18px;
            left:25px;
        }
        .new2{
            position: absolute;
            top: 278px;
            left:25px;
        }
</style>
<body>
//第一个
    <div class="box">
        <img src="./product.png" alt="" style="width:200px;height: 180px;">
        <span>机器人</span>
        <br>
        <span>$520</span>
    </div>
    <div class="new">
    <img src="./new.png" alt="" style="width:48px;height: 48px;"></div>
    
//第二个
    <div class="box">
        <img src="./product.png" alt="" style="width:200px;height: 180px;">
        <span>机器人</span>
        <br>
        <span>$520</span>
    </div>
    <div class="new2">
    <img src="./new.png" alt="" style="width:48px;height: 48px;"></div>
</body>

效果图：