position定位

自然顺序，盒子模型

.block:nth-child(1){   //第一个类名为.clock 的标签添加样式。
            position: static;  //static，会直接忽略所有的偏移量关键字，如下面的top,left,bottom,right,z-index。
            top: 20px;
            left: 20px;
        }

---------

上下两个块级元素设置了下边距和上边距，两个边距会重合，以高的为准。

        .block:nth-child(1){
            margin-bottom: 20px; 
        }
        .block:nth-child(2){
            margin-top: 30px;
        }

如上：A 和 B 之间的外边距为30xp;

---------------------

.block:nth-child(1){
            margin-left: auto;
            margin-right: auto;
        }

A 块级元素(记住是块级元素) ，固定width 和 height ，且设置position:static;（即：默认值时）

设置该元素的左右外边框为：auto时，则该元素会相对父元素，居中显示。

position:static;

margin-left:auto;

margin-right:auto;

---------------------------------

网页中常用的块元素有：div、dl、form、h1 – h6、hr、ol、p、pre、table、ul；

网页中常用的内联元素有：a、br、img、input、label、q、select、span、strong、textarea；

------------------------

relative是相对于自己原来的位置，进行偏移。且自己的文档流位置还是不变的！！！

（4）说的是使用z-index，z-index的值越高越靠前。

--------------

(1)，标签的原来位置就没有了。

        .partent{
            500px;
            height: 500px;
            background: green;
            position: relative;  //在某个标签中设定position:absolute，那么在他的随便什么祖先元素中设定position:relative，那么这个子标签就会相对于relative的标签进行定位。
        }
        .child{
            100px;
            height: 100px;
            background: red;
            position: absolute; //相对于本标签上面第一个定位position:relative的标签进行定位。如果本标签的祖先元素都没有设定relative，那么就是相对于body，浏览器进行定位。
            right: -80px;
            top: 100px;
        }

    <div class="partent">
        <div class="child"></div>
    </div>

--------------------------

        .partent{
            500px;
            height: 500px;
            background: green;
            position: relative;     //子元素相对于本祖先元素居中显示
        }
        .child{
            100px;
            height: 100px;
            background: red;

            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto auto; //本元素相对于有relative的祖先元素上下左右垂直居中。
        }

    <div class="partent">
        <div class="child"></div>
    </div>

----
            left: 0;
            right: 0;
            margin: 0 auto; //本元素相对于有relative的祖先元素左右垂直居中。

            top: 0;
            bottom: 0;
            margin:auto 0 ; //本元素相对于有relative的祖先元素上下垂直居中。

 =======================

块级元素 固定宽度  使用margin:0 auto; 进行左右居中显示。

===========================