CSS的Position属性

前言

CSS的position属性对于大多数人来说都是很熟悉的了，但是真正用的时候才发现，理解问题有时候还是太片面了。

官方定义

在W3School上对CSS position属性的定义是：

position属性规定元素的定位类型，这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

在仔细看上面的定义的时候，我发现一个平常都忽略的点，
绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型，为了验证这句话，我写了一个简单的例子如下

/*这里是对应的CSS代码*/
#box{
   width: 100px;
   height: 100px;
   border: 1px solid;
}

在上面的例子中，id是box的元素是一个内联的span元素，对于内联元素来说，width，height，padding-top，padding-bottom，margin-top，margin-bottom都不能改变，所以设置的width和height其实是不起作用的，但是，如果给span加一个 position:absolute 或者position:fixed的属性，就会发现，设置的width和height起作用了，span变成了一个块级元素。
一般来说我们想让内联元素变成块级元素采用的方法都是使用display相关的属性，只是不知道使用position也能达到一样的效果。

默认值	static
继承性	no
版本	CSS2
JavaScript语法	object.style.position = "absolute";

值	描述
static	默认值，没有定位，元素出现在正常的流中，忽略top，bottom，left，right或者z-index声明。
absolute	生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过 "left"，"right"，"top"，"bottom" 属性进行规定
relative	生成相对定位的元素，相对于其正常位置进行定位，定位方式同上
fixed	生成绝对定位元素，相对于浏览器窗口进行定位，定位方式同上
inherit	规定应该从父元素继承position 属性的值

我的理解

在上面的说明中，可以总结出以下几点：

• position不是一个继承属性，如果想要子元素继承父元素的position属性则应该使用 position:inherit 进行显式说明。
• 使用absolute进行绝对定位是相对于除static以外的第一个父元素进行定位，这个我想起了之前做过的一个东西：在一个图片的右上角显示一个删除按钮，具体效果如图：

屏幕快照 2017-03-23 上午11.20.20.png

实现过程大概是这样的

    ![](路径)
    
测试


/*这里是对应的CSS代码*/
#box{
    width: 100px;
    height: 100px;
    position: relative;
}
#box img{
    width: 100px;
    height: 100px;
}
#box div{
    background-color: orange;
    position: absolute;
    width: 50px;
    height: 30px;
    left: 25px;
    top:35px;
}

当然后面看看觉得直接给div设置background-image属性会简单的多，这也是后话了。

• 当position是static的时候不支持z-index等一系列属性，也就是说如果想让一个元素显示在另一个元素上面的时候，可以使用position:relative来代替position:static，只要不使用偏移使元素离开文本流，position:relative和在正常流中展示的情况是相同的。
• 使用position可以完成导航栏一直在页面最上部的效果。

导航栏

///////////
/*这里是对应的CSS代码*/
#box{
    width: 100px;
    height: 1000px;
    border: 1px solid;
}
#nav{
    position: fixed;
    top:0;
}

在上面的代码中由于id是box的div的高度很高，所以对浏览器来说会产生滚动条，但是在向下滚动的时候，导航栏一直位于浏览器的顶部。

• 其实left和right，top和bottom如果一起使用会发生冲突，所以最好只使用两对中的其中一个，如果同时声明了top，bottom，bottom属性是不会显示出来的，left和right中，right属性是不会显示出来的。

上面就是我目前对position属性的全部理解了，有什么遗漏的或者理解不对的欢迎指正和补充。祝好～