CSS定位之position详解_html/css_WEB-ITnose

position属性

在前端中，position是很常见的属性。通过这个属性可以调整dom元素在浏览器中显示的位置。

它有几个常用的属性：

static 默认值。通常是在覆盖absolute或者relative样式时使用。 relative 相对定位。相对于原本自己的位置，其他的元素样式不会发生改变。 position 绝对定位。相对于最近的一个应用absolute或者relative的父元素，然后相对这个元素进行定位。 fixed 相对浏览器定位。 inherit 继承父样式。

其中relative、position、fixed比较难于理解，下面就介绍下这三个：

relative

看意思是相对定位，那么是相对什么进行定位呢？其实是相对它原本的位置。比如学生站队，教练喊小明。小明出队，向前走了一步。
这就相当于:

小明{ position:relative; 向前一步！} 

看图也容易理解，原本三个span的位置为：

   1  2  3    

当我们对第2个span添加相对定位后，它先对于原始的位置偏移。

   .span-2 {position:relative;top:10px;left:10px;}    1  2  3    

absolute

这个属性比较复杂，看属性的名字是绝对定位，其实不然。
它也是一种相对定位，不过相对的不再是自己，而是父元素。具体是哪个父元素，就要看父元素是否应用了position属性。

举个例子，最开始我们有3个嵌套的div

      
1
2
3

      
查看更多关于CSS定位之position详解_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did111003