CSS中的position属性使用

position属性

position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。

absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
sticky	粘性定位，该定位基于用户滚动的位置。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。
inherit	规定应该从父元素继承 position 属性的值。
initial	设置该属性为默认值，详情查看 CSS initial 关键字。

以下文字转自(https://www.cnblogs.com/guolao/p/9048308.html)

关于CSS position，来自MDN的描述：

CSS position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left 属性则决定了该元素的最终位置。

然后来看看什么是文档流(normal flow)，下面是 www.w3.org 的描述：

Normal flow

Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level boxes participate in a block formatting context. Inline-level boxes participate in an inline formatting context.

个人补充（此处参考FungLeo的博客文章，原文点此）：

normal flow直译为常规流、正常流，国内不知何原因大多译为文档流；
窗体自上而下分成一行一行，并在每行中按从左至右的顺序排放元素；
每个非浮动块级元素都独占一行，浮动元素则按规定浮在行的一端，若当前行容不下，则另起新行再浮动；
内联元素也不会独占一行，几乎所有元素(包括块级，内联和列表元素）均可生成子行，用于摆放子元素；
有三种情况将使得元素脱离normal flow而存在，分别是 float，absolute ，fixed，但是在IE6中浮动元素也存在于normal flow中。

1.position:static(static是position的默认定位方式)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>position定位详解</title>
        <style>
       #container{
            width: 600px;
            height: 500px;
            background-color: rgb(226, 226, 226);
            margin:0 auto;
       
        }
        .box1{
            width: 180px;
            height: 140px;
            background-color: aqua;
       
        }

        </style>
       
        
    </head>
    <body>
        <div id="container">
            <div class="box1"></div>
        </div>


        
    </body>
    </html>

View Code

效果图:

position:static 是所有html元素默认参数.

2.position:relative(相对于元素原来的位置进行定位)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>position定位详解</title>
        <style>
       #container{
            width: 600px;
            height: 500px;
            background-color: rgb(226, 226, 226);
            margin:0 auto;
       
        }
        .box1{
            width: 180px;
            height: 140px;
            background-color: aqua;
       
        }
        .box2{
            width: 210px;
            height: 120px;
            background-color: rgb(81, 255, 0);
            
        }
        </style>
       
        
    </head>
    <body>
        <div id="container">
            <div class="box1"></div>
            <div class="box2"></div>
        </div>


        
    </body>
    </html>

View Code

效果图:

给box2块级元素添加relative定位,并设置上和左边距.

   .box2{
             210px;
            height: 120px;
            background-color: rgb(81, 255, 0);
            position: relative;
            top:30px;
            left: 50px;
        }

效果图:

3.position:absolute(相对于 static 定位以外的第一个父元素进行定位,会脱离文档流)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>position定位详解</title>
        <style>
       #container{
            width: 600px;
            height: 500px;
            background-color: rgb(226, 226, 226);
            margin:0 auto;
       
        }
        .box1{
            width: 180px;
            height: 140px;
            background-color: aqua;
       
        }
        .box2{
            width: 210px;
            height: 120px;
            background-color: rgb(81, 255, 0);
            position: absolute;
            top:50px;
            left: 100px;
        }
        </style>
       
        
    </head>
    <body>
        <div id="container">
            <div class="box1"></div>
            <div class="box2"></div>
        </div>


        
    </body>
    </html>

View Code

主要设置box2为绝对定位

.box2{
             210px;
            height: 120px;
            background-color: rgb(81, 255, 0);
            position: absolute;
            top:50px;
            left: 100px;
        }

效果图:

4.position:fixed(相对浏览器定位)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>position定位详解</title>
        <style>
       #container{
            width: 600px;
            height: 500px;
            background-color: rgb(226, 226, 226);
            margin:0 auto;
       
        }
        .box1{
            width: 180px;
            height: 140px;
            background-color: aqua;
       
        }
        .box2{
            width: 210px;
            height: 120px;
            background-color: rgb(81, 255, 0);
            position: fixed;
            right:50px;
            top: 70px;
        }
        </style>
       
        
    </head>
    <body>
        <div id="container">
            <div class="box1"></div>
            <div class="box2"></div>
        </div>


        
    </body>
    </html>

View Code

效果图:

5.position:inherit(继承父元素定位)

6.position: sticky

7.父元素是相对定位,子元素是绝对定位(子绝父相)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>position定位详解</title>
        <style>
       #container{
            width: 600px;
            height: 500px;
            background-color: rgb(226, 226, 226);
            margin:0 auto;
            position: relative;
            top: 40px;
            left: 100px;
        }

        .box1{
            width: 180px;
            height: 140px;
            background-color: aqua;
            position: absolute;
            left: 80px;
            top:100px;
        }
        
        </style>
       
        
    </head>
    <body>
        <div id="container">
            <div class="box1"></div>
         
        </div>


        
    </body>
    </html>