CSS为定位和浮动提供了一些属性(position static relative absolute float z-index),利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务。它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

  CSS有三种基本的定位机制:普通流、浮动和绝对定位position属性把元素放置到一个静态的、相对的、绝对的、或固定的位置中。

  static:位置被设置为static的元素(position属性默认值),对象遵循HTML定位规则,即该元素出现在文档的常规位置,不会重新定位。它始终会处于页面流给予的位置(static元素会忽略任何top、bottom、left或right声明)。通常此属性值可以不设置,除非是要覆盖之前的定义。
#divdemo1{position:static;}

  relative:位置被设置为relative的元素,可将其移至相对于其正常位置的地方,对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置,如"left:50px"会将元素移至元素正常位置左边50个像素的位置。
#divdemo2{position:relative;left:50px;top:40px;}

  absolute:位置设置为absolute的元素,可定位于相对于包含它的元素的指定坐标,此元素的位置可通过"left"、"top"、"right"以及"bottom"属性来规定。而其层叠通过z-index属性(无单位的整数值,可为负数。)定义。使用绝对定位(absolute positioning)的优点就是不需考虑元素在html中的位置,可以将元素放在文档中任何想放的位置。注意,此时对象不具有外边距(margin),但仍有内边距(padding)和边框(border)。
#divdemo3{position:absolute;right:0;top:0;width:200px;z-index:-1;}

  fixed:位置被设置为fixed的元素,可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过"left"、"top"、"right"以及"bottom"属性来规定。不论窗口滚动与否,元素都会留在那个位置。
#divdemo4{position:fixed;right:50px;top:40px;}



© 活着的博客 - 李权辉的个人博客:人,终究是生活在现实之中,是为了活着而生活.