Skip to content

Instantly share code, notes, and snippets.

@villadora
Created July 11, 2012 06:55
Show Gist options
  • Save villadora/3088524 to your computer and use it in GitHub Desktop.
Save villadora/3088524 to your computer and use it in GitHub Desktop.
CSS Position

CSS 'position'属性详细

Sample

position properties

position:static

_static_是默认的position属性, 也就是element会按照默认的方式出现在文档之中,通常使用"static"只是为了清除之前设置过的position属性

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.

position:relative

relative,相对的, 设置了_position:relative_之后就可以使用left,top,bottom,right等来指定element的位置, 但是这个相对并不是相对于之前的element或者左边,后面的element,而是相对于element在_position:static_设置下所在的位置。也就是说如果你设置_position:relative和top:1px,那么element上方就会偏离_position:static_的位置1个像素。

note _position:relative_并不会影响之后的元素位置,element之前占据的位置会留白,而其他的elements还是按照normal的方式排列.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.

position:absolute

absolute,绝对位置,这个element对于其同级别的elements来说就从layout flow中拿出了,就好象不存在一样,然后在根据document的的绝对位置来排列,你设置了top:10px,element就会放到离doc上方10px的地方。

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.

combination properties

position:relative + position:absolute

如果在parent element上设置了_position:relative_,而children elements上设置position:absolute,那么所有的在parent element中的elements的位置将会更具parent position来计算

Links

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment