说到CSS中的复杂布局,那就不得不说position了。
position的各种值会产生什么样的效果,下面会详细说明。
static
static是position的默认值。所以position:static
并不会被特殊定位。
static
relative
relative
表现和static
一样,当然排除了你可能添加了一些额外的属性。在一个position
属性上设置了relative
的
元素上设置top
、right
、bottom
、和left
(向设置的方向远离)的属性会使其偏离正常位置,其他元素不会补齐因位移产生的空白。
relative
absolute
absolute
是一个非常有意思的position
值。如果设置了绝对定位的元素element1
的外层没有设置了relative
或者absolute
的爹元素,爷爷元素,或者祖宗元素。那么这个element1
的元素就是相对于文档的body
元素。
absolute
fixed
fixed
是一个固定定位,这个元素会相对视窗来定位,所以就算页面滚动,它还是会留在相同位置。和relative一样,top、right、bottom和left属性都可用。
这个例子就不上图了,因为不滚动页面也看不出来。