css总结——position

CSS（Cascading Style Sheet），中文翻译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。在css控制页面中，主要有四种样式：行内样式（style 属性将css嵌套在p 标记中）、内嵌式（在HTML部分，没采用任何css代码，而是在style中对css代码进行嵌套）、链接式（使用link语句，将外部css导入到页面中）和导入样式。

在样式设计中，有一个非常关键的属性——position

CSS中有不少属性是用来定位的，这也为我们采用DIV+CSS 布局，取代古老的tabel布局提供了基础支持。

bottom： 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 

         
      clip： 设置元素的形状。元素被剪入这个形状之中，然后显示出来。 

         
      left： 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 

         
      overflow： 设置当元素的内容溢出其区域时发生的事情。 

         
      position： 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 

         
      right： 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 

         
      top： 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 

         
      vertical-align： 设置元素的垂直对齐方式。

z-index： 设置元素的堆叠顺序。

而这其中非常关键和初学者容易搞混的概念就是 position 属性：

         
      static 默认：位置设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。

         
      relative：位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，因此 "left:20" 会将元素移至元素正常位置左边 20 个像素的位置。

         
      absolute：位置设置为 absolute 的元素，可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。

         
      fixed：位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。

不论窗口滚动与否，元素都会留在那个位置。工作于 IE7（strict
模式）。这些属性是DIV布局的奠基石。由于浏览器的不同，盒模式中也有差异，比如说对于宽度盒高度，在不同浏览器中定义是不同的，IE6是包含边框 、内边距，而FF的只是指内容的宽度。

细节上的差异，往往是我们在日常工作中能总结出来的。所以也不必太在意。了解简单的css的使用，在不断应用的过程中，进行改进和更加深入的了解。对position的简单总结，如有错误，欢迎指出，感激不尽！！

版权声明：本文为博主原创文章，未经博主允许不得转载。