1114定位

最新推荐文章于 2024-07-24 22:39:14 发布

与生俱来123

最新推荐文章于 2024-07-24 22:39:14 发布

阅读量67

点赞数

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

本文链接：https://blog.csdn.net/qq_62919289/article/details/127847042

版权

前端专栏收录该内容

45 篇文章 0 订阅

订阅专栏

网页常见布局方式

标准流

浮动

定位

1.可以让元素自由的摆放在网页的任意位置

2.一般用于盒子之间的层叠情况

定位场景

定位之后的元素层级越高，可以层叠在其他盒子上面

可以让盒子始终固定在屏幕中某个位置

设置定位方式

属性名：position

静态定位就是不定位

设置偏移值

水平和垂直方向各选取一个使用即可（一般选近的就行）

如果left和right都写，以left为准。如果top和bottom都写，以top为准。

静态定位（不重要）

相对定位

意思：相对自己之前的位置进行移动

代码：position：relative;

特点：需要配合方位属性实现移动

相对于自己原来位置进行移动

在页面占位置，没有脱标

场景：配合绝对定位（子绝父相）

用于小范围移动

    <style>
        .box{
            position:relative;
            left: 100px;
            top: 100px;

            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

绝对定位

场景：相对于非静态定位的父元素进行定位移动

代码：position:absolute;

特点：需要配合全方位属性实现移动

默认相对于浏览器可视区域进行移动

在页面中不占位置，已经脱标

场景：子绝父相

      <style>
        .box{
            position:absolute;
            left: 00px;
            top: 100px;

            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <p>asdfghjkl</p>
    <p>asdfghjkl</p>
    <p>asdfghjkl</p>
    <p>asdfghjkl</p>
    <p>asdfghjkl</p>
    <p>asdfghjkl</p>
    <p>asdfghjkl</p>
    <p>asdfghjkl</p>
    <p>asdfghjkl</p>
    <p>asdfghjkl</p>
</body>

子绝父（高层级）相

    <style>
        .father{
            position:relative;
            left: 00px;
            top: 100px;

            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .son{
            position:absolute;
            left: 50px;
            top: 100px;

            width: 100px;
            height: 20px;
            background-color: blue;
        }

    </style>
</head>
<body>
    <div class="father">
        <div class="son">ajiwadhwdjwdw</div>
    </div>
    <p>asdfghjkl</p>
    <p>asdfghjkl</p>
    <p>asdfghjkl</p>
    <p>asdfghjkl</p>
    <p>asdfghjkl</p>
    <p>asdfghjkl</p>
    <p>asdfghjkl</p>
    <p>asdfghjkl</p>
    <p>asdfghjkl</p>
    <p>asdfghjkl</p>
</body>

案例学成在线

.box .content li {
    position: relative;
    float: left;
    margin-right: 15px;
    margin-bottom: 15px;
    width: 228px;
    height: 270px;
    background-color:#fff;
    box-shadow: 0px 2px 3px 0px 
    rgba(118, 118, 118,0.2);
}
.box .content li .hot {
    position:absolute;
    top: 4px;
    right: -4px;
}

案例子绝父相

代码1

        .box{
            /*定位后margin数字失效*/
            position:absolute;
            /*绝对定位后居中*/
            left: 50%;
            margin-left: -150px;
            top: 50%;
            margin-top: -150px;
            
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
</body>

代码2

    <style>
        .box{
            /*定位后margin数字失效*/
            position:absolute;
            /*绝对定位后居中*/
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
</body>