CSS中的定位

最新推荐文章于 2023-06-22 23:21:52 发布

y_hh_

最新推荐文章于 2023-06-22 23:21:52 发布

阅读量210

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/y_hh_/article/details/107335550

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了CSS中的定位概念，详细阐述了static、relative、absolute、fixed和sticky五种定位类型，并通过实例展示了相对定位、绝对定位和fixed定位的效果。还分享了如何利用定位实现元素的垂直居中对齐。

摘要由CSDN通过智能技术生成

简述

定位是指，你可以相对元素的常规位置来定义元素的具体位置，可以相对元素或另一个元素定位元素的位置，甚至还可以相对视区（例如浏览器窗口）定位元素

定位的类型

定位有五种类型，通过position属性指定，分别是static、relative、sticky、absolute、fixed. 初始值时static

static

正常生成元素框。块级元素生成矩形框，位于文档流中，行内元素生成一个或多个行框，随父元素流动

relative

元素框偏移一定的距离。元素的形状与未定位时一样，且元素占的空间也与正常情况下相同

absolute

元素框完全从文档流中移除，其在文档流占据的空间也不复存在，相对容纳块定位。不管元素在常规的文档流中生成什么类型的矿体，定位之后生成的都是块级框，绝对定位元素的容纳块是position属性的值不是static的最近的祖辈元素。

fixed

元素框行为类似于absolute，不过容纳块是视区自身

sticky

元素一开始留在常规的文档流中，当触发粘滞的条件时，从常规的文档流中移除，但其在文档流中占据的空间保留，此时，相当于相对容纳快绝对定位，触发粘滞条件失效之后，元素回到常规文档流中的初始位置。

测试

相对定位：

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Postion</title>
    <style>
        .container{
            position: relative;
            background-color: gray;
            width: 800px;
            height: 800px;
        }
        .div_relative{
            position: relative;
            background-color: yellowgreen;
            left : 50%;
            top: 50%;
            bottom: 0;
            right: 10%;
            width: 50%;
            height: 50%;
        }
        .div_p{
            background-color: goldenrod;
        }
        p{
            font-size: 48px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="div_relative">这是相对定位</div><p>
            文本，是指书面语言的表现形式，从文学角度说，通常是具有完整、系统含义（Message）的一个句子或多个句子的组合。一个文本可以是一个句子（Sentence）、一个段落（Paragraph）或者一个篇章（Discourse）。广义“文本”：任何由书写所固定下来的任何话语。（利科尔） 狭义“文本”：由语言文字组成的文学实体，代指“作品”，相对于作者、世界构成一个独立、自足的系统。
        </p>
    </div>
</body>
</html>

效果

在这里插入图片描述
可以看到在相对布局下，它在定位之前在文档流中占据的空间还在，同时定位之后会覆盖其他元素。

绝对定位

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Postion</title>
    <style>
        .container{
            position: relative;
            background-color: gray;
            width: 800px;
            height: 800px;
        }
        .div_relative{
            position: absolute;
            background-color: yellowgreen;
            left : 50%;
            top: 50%;
            bottom: 0;
            right: 10%;
            width: 50%;
            height: 50%;
        }
        .div_p{
            background-color: goldenrod;
        }
        p{
            font-size: 48px;
        }
    </style>
</head>
<body>
    <div class="container">
        <p>
            文本，是指书面语言的表现形式，从文学角度说，通常是具有完整、系统含义（Message）的一个句子或多个句子的组合。一个文本可以是一个句子（Sentence）、一个段落（Paragraph）或者一个篇章（Discourse）。广义“文本”：任何由书写所固定下来的任何话语。（利科尔） 狭义“文本”：由语言文字组成的文学实体，代指“作品”，相对于作者、世界构成一个独立、自足的系统。
        </p>
        <div class="div_relative">这是绝对定位</div>
    </div>
</body>
</html>

效果
在这里插入图片描述

可以看到，绝对定位他原先在文档流中的位置被移除了，而且会覆盖其他元素。
通常使用的时候，需要设定父元素为相对布局，作为容纳块。

fixed定位

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Postion</title>
    <style>
        .container{
            position: relative;
            background-color: gray;
            width: 800px;
            height: 800px;
        }
        .div_relative{
            position: fixed;
            background-color: yellowgreen;
            left : 50%;
            top: 50%;
            bottom: 0;
            right: 10%;
            width: 50%;
            height: 50%;
        }
        .div_p{
            background-color: goldenrod;
        }
        p{
            font-size: 48px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="div_relative">这是fixed定位</div><p>
            文本，是指书面语言的表现形式，从文学角度说，通常是具有完整、系统含义（Message）的一个句子或多个句子的组合。一个文本可以是一个句子（Sentence）、一个段落（Paragraph）或者一个篇章（Discourse）。广义“文本”：任何由书写所固定下来的任何话语。（利科尔） 狭义“文本”：由语言文字组成的文学实体，代指“作品”，相对于作者、世界构成一个独立、自足的系统。
        </p>
    </div>
</body>
</html>

效果
在这里插入图片描述
fixed定位类似与绝对定位，在文档流中会移除所占的空间，但不同的是，容纳块是指视区。

通过定位实现垂直居中

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Postion</title>
    <style>
        .container{
            position: relative;
            background-color: gray;
            width: 800px;
            height: 800px;
        }
        .div_relative{
            position: relative;
            background-color: yellowgreen;
            left : 25%;
            top: 25%;
            bottom: auto;
            right: auto;
            width: 50%;
            height: 50%;
        }
        .div_p{
            background-color: goldenrod;
        }
        p{
            font-size: 48px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="div_relative">这是fixed定位</div><p>
            文本，是指书面语言的表现形式，从文学角度说，通常是具有完整、系统含义（Message）的一个句子或多个句子的组合。一个文本可以是一个句子（Sentence）、一个段落（Paragraph）或者一个篇章（Discourse）。广义“文本”：任何由书写所固定下来的任何话语。（利科尔） 狭义“文本”：由语言文字组成的文学实体，代指“作品”，相对于作者、世界构成一个独立、自足的系统。
        </p>
    </div>
</body>
</html>