Zerlinda's Blog

CSS定位机制:position

CSS的定位机制分为三种,分别是文档流,浮动和定位。其中文档流的意义就是按照html里面的写法从上到下从左到右的布局。 浮动包括两种,左浮动和右浮动,直到它的外边框边缘碰到包含框或另一个浮动框的边缘。任意的浮动使元素脱离了文档的普通流,就像在文档中不占据空间。但如果包含块太窄,无法容纳水平排列的浮动元素,那么其他浮动块会向下移动,直到有足够多的空间。 position 属性规定元素的定位类型。但是任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 “inherit”。下面主要理解一下position的几个不同的定位类型。 首先要明确,position定位从哪里开始?对于设定了padding,margin的元素,这一点十分很重要了。 设置了position属性的元素在父元素的border内部进行定位但不包括border。 具体看一下这四个值的规定:

absolute

生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 “left”, “top”,”right” 以及 “bottom” 属性进行规定。

absolute生成绝对定位的元素,它的定位是相对于static定位以外的第一个父元素进行定位,也就是说如果父元素没有明确设置position属性,元素将继续向外寻找,直到遇到第一个position属性不为static属性的元素为父元素进行定位。并且,absolute使元素脱离了文档流,不占据空间。可以覆盖页面上的其他元素,可以通过设置Z-Iindex属性来控制这些框的堆放次序。z-index越大,显示的优先级越高。

fixed

生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 “left”, “top”, “right” 以及 “bottom”属性进行规定。

fixed生成绝对定位的元素,它的定位相对于浏览器窗口进行定位。因此,它在浏览器中的显示是固定的,随着滚动条的滚动其位置不发生变化。这种定位方式也使元素脱离了文档流,不占据空间。

relative

生成相对定位的元素,相对于其正常位置进行定位。 因此,”left:20” 会向元素的 LEFT 位置添加 20 像素。

static : 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 inherit 规定应该从父元素继承 position 属性的值。

如果元素没有设置定位属性,那么它的position为默认static即没有定位。它的文档流按照普通html文档从上到下从左到右进行布局。

在实际应用的时候,用到最多的是设置父元素定位为relative,然后内部元素进行absolute定位。fixed这种方式通常是需要页面某一部分固定在某一位置,大多是固定的导航或者广告等。

发表评论

电子邮件地址不会被公开。 必填项已用*标注