• 首页
  • html5
  • css 中 position 定位的那4个属性 relative absolute fixed static

css 中 position 定位的那4个属性 relative absolute fixed static

找准自己的位置很重要.页面也是一样.

设计师出手的psd是这样的


结果施工后的效果是这样的:


这样的结果相信PO喝完酒也不会验收成功吧.


页面在设计时的层次,羽化,字体,大小,边距,背景 等.这些都不是随便堆砌起来的.所以切页面的时候要完全按照设计师的psd 效果来实施,才不会让最后的产品和设计相差甚远.


其中,比较难的是层的定位.所以今天大概说一下 position 属性相关的一点点知识分享.


position 属性包含如下几个值:

  1. relative  相对的 (这个属性值有参照物)

  2. absolute  绝对的 (这个绝对其实也是有一个参照物的)

  3. fixed  固定的(就像钉子钉在那里一样)

  4. static  静止的 (这是dom元素默认的一种文档流布局)


第一个属性 relative 理解起来还好,按照参照物的一个偏移.

第二个理解起来很费脑筋,一个有参照物的绝对定位,什么玩意啊......

第三,第四非常容易理解.


下面我们来一个个简单说明下:

<body>
<div id="main">
    <div id="child_one">
    
    </div>
    <div id="child_two">
    
    </div>
</div>
</body>


relative

从前有一个父div main 下有2个子div 分别是 child_one 和 child_two ,他们一家人世世代代生活在 body 村庄里......(此处省略一个字)


这一家之所以能安安稳稳在一起生活下去,是因为他们遵循dom世界的默认文档流来布局.(这时他们的 position 都是 static)

直到大儿子 child_one 苦于学习,熟读四书五经后,练得一手好武功(我靠,读书和练武好像没啥关系......)终于在月圆之时打通任督二脉, position 变成了 relative.


正所谓,世界那么大,它想去看看,关键村子里大小老少都也拦不住啊,它已经飘起来了,不再属于那个村子.那它属于哪里?

#child_one{
    position:relative,
    top:25px,
    left:50px
}

这时的 child_one 已经不在遵循默认文档流布局,而是根据 top 和 left 值进行偏移.他的偏移是基于对象的 margin 左上侧偏移.


那如果child_one 偏移了,他的亲弟弟 child_two 会怎么样?

答案是:不怎么样,该怎么样还是怎么样,依然在 body 村庄里,星星还是那个星星,月亮还是那个月亮.


absolute

从前有个庙,庙里有个和尚.....上面的那个故事,不再重复写了,还是熟悉的味道.


这个属性我们说也是有个参照物,那他的参照物是谁?

没错,是他爹.


所以要分情况讨论:

  1. 大儿子 child_one 上山砍柴,不慎从悬崖掉下去,不料却坠进一个世外桃源,遇到世外高手,还送给他一本武林秘籍

然后大儿子练成了下面的武功

#child_one{
    position:absolute,
    top:25px,
    left:50px
}

这时大儿子的定位会参照 body 来偏移.(dom世界里body最大,世外桃园也是body的一部分)


  2. 第二种情况是 大儿子和父亲一起上山砍柴,不慎2个人一起从悬崖掉下 (多么背的一家人.....)然后进了世外桃园,然后遇到了高手,送给他爸一本武林秘籍.


这时他爸应该是这样的:

#main{
    position:absolute,
    top:50px,
    left:100px
}

或者是这样的:

#main{
    position:relative,
    top:25px,
    left:50px
}


他爸为了传承绝世武功,决定传授给他


那么大儿子应该是这样的:

#child_one{
    position:absolute,
    top:25px,
    left:50px
}

这时的父亲已经不再属于村庄.

如果是第一个样子,应该是相对于 body 进行偏移.

如果是第二个样子,应该是相对对象的 margin 左上侧进行偏移.


但是不管父亲的position 是 relative 还是 absolute

此时的大儿子 child_one 就必须按照父亲的定位进行偏移. (他的定位完全参考父亲)


这时 child_tow 该如何定位,他还是他,基于文档流的默认定位.


fixed

讲到这个属性,貌似上面的2个儿子,任何一个都不会掉到悬崖下了.

因为 fixed 很简单,就是固定定位


如何固定,就是相对于 body 的固定定位.也就是说和上面 absolute定位时,大儿子一个人掉入悬崖的情况是一样一样的.


注意: position:fixed ; 的定位也是越出文档流的,简单粗暴的讲就是 这个层是飘起来的.


他们相对于 body 进行偏移.


static

这就是dom元素的默认排序方式,这种布局不会飘起来

,很少有人设置 position:static ,

如果有,那么这个人要么就是吃多了,要么就是吃多了.




回到顶部