企业网站建设给你详细解释CSS的绝对定位用法

企业网站建设中经常要用到绝对定位,这家伙在定位界中优先级别高,但是用起来却并不复杂。
 
何为绝对定位box? 由position为absolute或fixed的dom元素产生的box,我们称之为绝对定位box。这类box是如何进行绝对定位的?position为absolute或是fixed会产生不同的效果吗?我们现在就去看看。
 
 
一. position为absolute的绝对定位box
用法:设置position为absolute,选定一个离它近的父级定位box(第25条)作为它的containing block(第11条),利用left/right/top/bottom(用法请参考这里) 来相对containing block作一定的偏移(当然,你也可以不偏移)。
 
会不会有童鞋会问,如果绝对定位box没有父级定位box怎么办?嗯....有道理,网站在制作是有可能出现的。
 
你要相信CSS开发小组!他们有设置备胎的。
 
如果绝对定位box没有父级定位box,那么它的containing block就是initial containing block(第10条)。
 
 
二. position为fixed的绝对定位box
用法:设置position为fixed,以initial containing block作为它的containing block, 利用left / right / top / bottom 来相对containing block作一定的偏移。
 
特点:在continuous media(看第1条)上,不管怎样滚动网页,该box的位置始终保持不变。道理很简单,因为initial containing block的位置是不会变化的!当然,如果某个position为absolute的box是以initial containing block为定位box,也会有同样的效果。
 
 
三、绝对定位与浮动进行比较
 
在企业网站建设中的共同点是: 都脱离了普通流。
 
不同点在于各自脱离的程度。
 
浮动虽然脱离了普通流,但它却在一定程度上影响着普通流box的布局,诸如一言不合就占据别人的地盘,挡住下方的block-level box,诱惑一堆文字围绕在旁等等。
 
而绝对定位,只会根据参照物去作一定的偏移,即使有时候会遮挡住其他box。它是从骨子里完全脱离了普通流,丝毫不会影响普通流box的布局!


总体看来,绝对定位是不是比浮动容易理解多了,在企业网站建设中绝对定位用的很多,一定要弄懂绝对定位是什么意思,怎么操作。
 
 

X

截屏,微信识别二维码

微信号:13366258895

(点击微信号复制,添加好友)

  打开微信