css 中 position 定位的那4个属性 relative absolute fixed static
找准自己的位置很重要.页面也是一样.
设计师出手的psd是这样的
结果施工后的效果是这样的:
这样的结果相信PO喝完酒也不会验收成功吧.
页面在设计时的层次,羽化,字体,大小,边距,背景 等.这些都不是随便堆砌起来的.所以切页面的时候要完全按照设计师的psd 效果来实施,才不会让最后的产品和设计相差甚远.
其中,比较难的是层的定位.所以今天大概说一下 position 属性相关的一点点知识分享.
position 属性包含如下几个值:
relative 相对的 (这个属性值有参照物)
absolute 绝对的 (这个绝对其实也是有一个参照物的)
fixed 固定的(就像钉子钉在那里一样)
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
从前有个庙,庙里有个和尚.....上面的那个故事,不再重复写了,还是熟悉的味道.
这个属性我们说也是有个参照物,那他的参照物是谁?
没错,是他爹.
所以要分情况讨论:
大儿子 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 ,
如果有,那么这个人要么就是吃多了,要么就是吃多了.