CSS总结 • 【第6章 CSS定位】

最新推荐文章于 2024-02-09 12:53:43 发布

.冯上

最新推荐文章于 2024-02-09 12:53:43 发布

阅读量215

点赞数

分类专栏： HTML CSS总结文章标签： css html

本文链接：https://blog.csdn.net/qq_51756226/article/details/111216446

版权

HTML CSS总结专栏收录该内容

17 篇文章 1 订阅

订阅专栏

全部章节 >>>>

CSS定位是基于盒子模型的，可分为静态static定位，绝对absolute定位，相对relative 定位，固定fixed定位。
在这里插入图片描述

static： 对象遵循正常文档流，top、right、bottom、left等属性无效

absolute： 对象脱离正常文档流，使用left、right、top、bottom等属性进行定位，但不具有margin边距。根据父级进行定位，找设置了定位（除了static）的祖先类元素（父类及以上），直到"html"标签为止。还需要注意的是，relative和static方式在最外层时是以”body“标签为定位原点的，而absoulte方式在无父级是position非static定位时是以”html“作为原点定位，”body“比“html”元素多8px的margin边距。

relative： 遵循正常文档流，使用left、right、top、bottom等属性进行定位，定位时，原本该元素占据的空间位置不变，以“原本该元素”的左上位置为中心点，根据设置的left、right、top、bottom等属性进行位置的偏移。对象不可层叠

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father {
            background-color: deepskyblue;
            width: 500px;
            height: 200px;
            margin: auto;
        }
        .son {
            width: 100px;
            height: 100px;
            border: 1px solid blue;
            position: absolute;
            left: 0;
            top: 0;
        }
        .relative{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            position: relative;
        }
    </style>
</head>
<body>
<div class="relative">relative</div>
<div class="father">
    <div class="son">absolute</div>
</div>
</body>
</html>

fixed： 脱离正常文档流，使用left、right、top、bottom等属性以窗口左上角为参考点进行定位，会固定在浏览器上，例如：

在这里插入图片描述

如果同时有标准流盒子，浮动盒子，绝对定位盒子。它们的叠层顺序：

在这里插入图片描述

绝对定位的盒子会覆盖下面的文字及盒子

但浮动的盒子只会覆盖盒子，并不会覆盖文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1 {
            background-color: red;
            float: left;
            width: 80%;
        }
        .div2,
        .div4 {
            background-color: black;
            color: white;
            width: 100%;
        }
        .div3 {
            background-color: cornflowerblue;
            width: 50%;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
<div class="div1">漂浮的盒子1</div>
<div class="div2">标准的盒子1</div>
<div class="div3">绝对定位的盒子1</div>
<div class="div4">标准的盒子2</div>
</body>
</html>