position-定位

最新推荐文章于 2024-06-05 21:39:36 发布

zhouming1107

最新推荐文章于 2024-06-05 21:39:36 发布

阅读量74

点赞数

分类专栏： # css 文章标签： html css css3 前端 html5 Powered by 金山文档

本文链接：https://blog.csdn.net/zhouming1107/article/details/129461306

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

定位是网页布局中常见的手段之一，所谓定位就是将元素移动到我们想让它在页面上显示的位置上。常见的定位有：相对定位、绝对定位、固定定位。

相对定位

盒子可以相对自己原来的位置进行位置调整，称为相对定位

下面的代码中我们可以看到1号盒子相对自己原来的位置向下和向右各移动了50px。要记住定位后的移动方向跟直觉是相反的，比如：top:50px; 是向下移动，left:50px是向右移动。我们还可以看到一个现象：1号盒子虽然移走了。但是2号盒子并没有补上1号盒子留下的位置。还在原来的位置。这就是相对定位的一个特性：相对定位不会丢失原位置，俗称人走了魂还在。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 100px;
            height: 100px;
        }
        .box1 {
            position: relative;
            background: #ff0000;
            top: 50px;
            left: 50px;
        }
        .box2 {
            background: #00ff00;
        }
    </style>
</head>
<body>
    <div class="box1">
        1
    </div>
    <div class="box2">
        2
    </div>
</body>
</html>

绝对定位

盒子可以相对有position属性为(absolute、relative、fixed)的先辈元素的位置调整自己的位置，称为绝对定位。如果往上找的先辈元素都没有position属性为(absolute、relative、fixed)的话，最终会以html元素为基准。

下面的代码中box元素设置了相对定位。所以box1的绝对定位的基准位置就是box。同时我们可以看到box2占据了box1原来的位置。所以绝对定位的元素会丢失自己原来的位置，俗称人走了魂也走了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 100px;
            height: 100px;
        }
        .box {
            width: 200px;
            background: #7777ff;
            position: relative;
            top: 50px;
            left: 50px;
        }
        .box1 {
            position: absolute;
            background: #ff0000;
            top: 50px;
            left: 50px;
        }
        .box2 {
            background: #00ff00;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1">
            1
        </div>
        <div class="box2">
            2
        </div>
    </div>
</body>
</html>

固定定位

固定定位是指盒子相对于浏览器窗口进行定位

下面的代码的显示效果可以看到不论浏览器如何滚动。box相对于浏览器窗口的位置都是固定的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            height: 1000px;
        }
        div {
            width: 100px;
            height: 100px;
            background: #7777ff;
        }
        .box {
            position: fixed;
            top: 50px;
            right: 50px;
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
</body>
</html>