position属性详解(static|relative|absolute|fixed|sticky)

一、staic——自然定位/常规定位/静态定位
把它叫做定位中的一股清流，回归本真
1、作用:是元素定位于常规/自然流中，即块、行垂直排列下去，行内元素水平从左到右
2、特点：

• 会忽略掉top、left、right、bottom或者z-index声明

首先写如下样式：一个父容器里面右三个块

<div class="container">
    <div class="box1">A</div>
    <div class="box2">B</div>
    <div class="box3">C</div>
</div>

 .container{
            border:1px solid black;
        }
        .container>div{
            width:100px;
            height:100px;
            line-height:100px;//文本垂直居中
            -moz-text-align:center;
            text-align: center;//文本水平居中
        }
        .box1{
            border:1px solid blue;
        }
        .box2{
            border:1px solid red;
        }
        .box3{
            border:1px solid blueviolet;
        }

把块A设置如下样式：

 .box1{
            border:1px solid blue;
            position:static;
            top:20px;
        }

结果图：

没有发生任何变化。说明设置static的元素是不受top影响的，left、right、bottom也一样

• 两个相邻的元素都设置了外边距，那么最终的外边距=两者外边距中最大的

把A、B块的样式设置如下

 .box1{
            border