CSS中的定位

简述

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

定位的类型

定位有五种类型,通过position属性指定,分别是staticrelativestickyabsolutefixed. 初始值时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>

效果

CSS中的定位_第1张图片
可以看到在相对布局下,它在定位之前在文档流中占据的空间还在,同时定位之后会覆盖其他元素。

绝对定位

代码

<!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>

效果
CSS中的定位_第2张图片

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

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>

效果
CSS中的定位_第3张图片
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>

效果
CSS中的定位_第4张图片

参考

《CSS权威指南》第三版

你可能感兴趣的:(CSS)