【CSS】定位position

贺情

已于 2022-05-17 20:56:57 修改

阅读量78

点赞数

文章标签： html css 前端

于 2022-04-24 10:45:24 首次发布

本文链接：https://blog.csdn.net/m0_50947589/article/details/124375713

版权

定位position

包括静态定位static，相对定位relative，绝对定位absolute，固定定位fixed。如果元素没有进行特殊设置，一般默认为静态定位static。

相对定位relative

相对定位relative的参考物：定位前的位置

相对定位特点：

1.不影响元素本身特性

2.元素不脱离文档流

3.相对于元素的原位置进行偏移

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>relative</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 10px;
            font-size: 30px;
            text-align: center;
            line-height: 200px;
        }
        .second {
            position: relative;
            
        }
    </style>
</head>
<body>
    <div>1</div>
    <div class="second">2</div>
    <div>3</div>
</body>
</html>

使用偏移之后

.second {
            position: relative;
            left: 20px;
        }

块2相对于原位置向左偏移了20px，而且没有脱离文档流。

绝对定位absolute

绝对定位absolute的参考物：最近的使用了定位的父级，如果没有就找body

绝对定位的特点：

元素脱离文档流（显示最后一个定义的内容）
行标签支持所有css样式
块标签默认下不再占满一行，由内容撑开宽高
清除子级的浮动

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>absolute</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .d1 {
            position: absolute;
            width: 300px;
            height: 300px;
            background-color: cyan;
            overflow: hidden;
            margin: 50px;
        }
        .d2 {
            position: fixed;
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color: gold;
            overflow: hidden;
        }
        .d3 {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 50px;
            top: 50px;
        }
        span {
            float: left;
        }
    </style>
</head>
<body>
    <div class="d1">
        <div class="d2">
            <div class="d3">
                <span>1</span>
                <span>2</span>
            </div>
        </div>
    </div>
</body>
</html>

注意，这里提到的使用了定位的父级不包括使用了静态定位的父级。

固定定位 fixed

固定定位fixed、的参考物：浏览器窗口

固定定位的特点：

1.元素脱离文档流

2.清除子级浮动

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 100px;
            height: 300px;
            position: fixed;
            top: 260px;
            background-color: cyan;
        }
        .left {
            left: 10px;
        }
        .top {
            height: 150px;
            top: 10px;
            left: 10px;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="top"></div>
</body>
</html>

使用了固定定位后，元素位置固定，不会随着浏览器的上下滚动而移动。

关于定位的万能居中

使用定位后，有一个使元素居中的万能方式。

前提是居中层级的父级使用了定位

如：width：300px，height500px

对当前层级使用绝对定位absolute，使left：50%；top：50；

然后使margin-left：-width/2；（-150px）margin-top：-height/2；（-250px）

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>万能居中</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html, body {
            /* 如果想让某个div占满全屏 height需要这种处理 */
            /* height: 100%; */
        }
        .bg {
            position: fixed;
            width: 100vw;
            height: 100vh;
            background-color: rgba(0,0,0,.75);
        }
        .alert {
            width: 300px;
            height: 500px;
            background-color: #fff;
            /* 万能居中公式 */
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -150px;
            margin-top: -250px;
            /* margin-left: -width/2;
            margin-top: -height/2; */
        }
    </style>
</head>
<body>
    <div class="bg">
        <div class="alert"></div>
    </div>
</body>
</html>