CSS定位

Johaden

已于 2024-05-31 22:00:13 修改

阅读量554

点赞数 14

分类专栏：前端自学笔记文章标签： css 前端

于 2024-05-31 21:58:19 首次发布

本文链接：https://blog.csdn.net/Johaden/article/details/139361392

版权

前端自学笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

浮动虽然灵活但不易控制，定位布局可以准确定位页面中某一元素。

1.定位方式：

·相对定位：相对于元素在文档流中的正常位置进行定位

·绝对定位：相对于其最近已定位的祖先元素进行定位，不占据文档流

·固定定位：相对于浏览器窗口进行定位。不占据文档流，固定在屏幕上的位置，不随滚动而移动。

PS：文档流？在网页设计和布局中，文档流是一个核心概念，它决定了页面元素如何排列和显示。想象一下，你有一张白纸，然后开始在上面写字或画图。你会从纸张的左上角开始，一行接一行地往下写，直到纸的右下角。这就是文档流的基本思想。在网页上，每个元素（比如段落、图片、标题等）默认都是按照这个顺序来排列的。它们会按照在HTML代码中出现的顺序，从上到下、从左到右依次排列。这种排列方式被称为“正常流”或“常规流”。但是，有时候你可能想要改变这种默认的排列方式。例如，你可能想让某个元素浮动到旁边，或者让它脱离常规的排列顺序，出现在页面的其他位置。这时，你就可以使用CSS的一些属性，比如`float`、`position`等，来改变元素的布局。这些改变会让元素脱离正常的文档流，从而实现更复杂的页面布局效果。

2.相对定位（relative）：

如下代码所示，粉红色的box在经过左移（left）60px和下移（top）40px后，上下的两个box均未改变位置，这体现了相对定位的性质，即相对定位的元素不会脱离正常的文档流。

PS：left是指在左边创建某长度的空间，体现为向右移动。top同理。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>定位</title>

    <style>
        .box1{
            height:350px;
            background-color:aqua;
        }
        .box-normal{
            width:100px;
            height:100px;
            background-color:blueviolet;
        }
        .box-relative {
            width: 100px;
            height: 100px;
            background-color:deeppink;
            position:relative;
            left:60px;
            top:40px;
        }
    </style>
</head>
<body>
    
    <h1>相对定位</h1>
    <div class="box1">
        <div class="box-normal"></div>
        <div class="box-relative"></div>
        <div class="box-normal"></div>
    </div>
</body>
</html>

3.绝对定位（absolute）：

如下图代码所示，当设置绝对定位时，看到最下方的紫色块消失，这是因为绝对定位不占据文档流，而最下方的紫色块自动上浮到原本绝对定位的绿色快的位置。当把绿色块移动后，就可以看到紫色块移动后的位置。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style>
        .box2{
            height:350px;
            background-color:gold;
            margin-bottom:300px;
        }
        .box-absolute {
            width: 100px;
            height: 100px;
            background-color:olivedrab;
            position:absolute;
            left:120px;
        }
    </style>
</head>
<body>
        <h1>绝对定位</h1>
        <div class="box2">
            <div class="box-normal"></div>
            <div class="box-absolute"></div>
            <div class="box-normal"></div>
        </div>
    </div>
</body>
</html>

3.固定定位（fixed）：

与绝对定位唯一相同的地方就是固定定位也是脱离了正常文档流，但是不同的是，绝对定位是相对于元素最近的已经定位的父级元素进行定位。如果没有已经定位的父级元素，就会相对于html标签定位。

而固定定位相对于浏览器窗口进行定位，即使页面滚动，元素依然会保持在窗口的相同位置。

<!DOCTYPE html>

<html>
<head>
    <title>定位</title>

    <style>
            ......
        .box-fixed{
            width:100px;
            height:100px;
            background-color:royalblue;
            position:fixed;
            right:0;
            top:300px;
        }
    </style>
</head>
<body>
              .......
        <h1>固定定位</h1>
        <div class=" box-fixed"></div>
    </div>
</body>
</html>

如上代码，当我们输入完position:fixed的时候发现盒子并没有出现，这是因为我们还没有给它定义位置，它不知道应该出现在哪，在输入完right:0;top:300px;的时候，这时盒子就知道自己的位置了，即靠在右边，距离顶部300px，且无论如何滚动鼠标滚轮，该盒子的位置都不动。类似网页中的侧边栏和导航栏。（如下图为鼠标上滑前后效果，右侧蓝色盒子为固定定位）

固定定位

4.选择哪种定位按所需选择，相对定位用于微调元素的位置，绝对定位和固定定位用于创建更复杂的布局。

Johaden

关注

14
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS定位

如下图代码所示，当设置绝对定位时，看到最下方的紫色块消失，这是因为绝对定位不占据文档流，而最下方的紫色块自动上浮到原本绝对定位的绿色快的位置。与绝对定位唯一相同的地方就是固定定位也是脱离了正常文档流，但是不同的是，绝对定位是相对于元素最近的已经定位的父级元素进行定位。如下代码所示，粉红色的box在经过左移（left）60px和下移（top）40px后，上下的两个box均未改变位置，这体现了相对定位的性质，即相对定位的元素不会脱离正常的文档流。·绝对定位：相对于其最近已定位的祖先元素进行定位，不占据文档流。
复制链接

扫一扫