一、CSSposition属性介绍CSS中的position属性规定了元素定位方式的类型（static、relative、absolute或fixed）。有四个值：static、relative、absolute和fixed，默认为static。2.position:staticstatic：没有定位，元素出现在正常的文档流中，忽略left，right，top，bottom和z-index。所以当static被设置为元素的position属性时，left属性没有作用，但是元素出现在正常流中。3.position:fixedfixed：生成固定定位的元素，相对于浏览器窗口定位，即浏览器窗口的滚动不会影响元素的位置。元素的位置与文档流无关，因此不占空间，可能会出现与其他元素重叠的情况。窗口滚动不会影响content元素的位置，content元素总是在contaniner元素的右下角。四。position:relativerelative：元素相对于自身正常位置定位，元素处于正常文档流中。未设置左侧和顶部时的正常位置。设置了left和top属性，元素位置移动，向右移动50px，向下移动20px。但是元素保留的空间保持正常流动，即不会影响其他元素。五。position:absoluteabsolute：元素绝对定位，相对于非静态定位的第一个父元素，该元素脱离文档流。所以会找到除静态定位之外的第一个父元素，因为span的父元素的内容和容器都没有设置position属性，默认是static，找到的第一个父元素是html
，相对于向左移动100px。如果内容或容器的position属性设置为relative、absolute或fixed，则span将相对于内容或容器定位。以下是三个示例。position属性不是静态的span元素的第一个父元素是content，所以它相对于content向左移动10px。当content属性设置为fixed时，span元素相对于内容向左移动10px。span元素的第一个position属性不是static的父元素是容器，所以它相对于容器向左移动了10px。6.摘要位置：static，元素出现在正常流中，元素定位不能设置left,right,top,bottom。position:fixed，元素脱离文档流，相对于浏览器窗口的位置保持不变。position:relative，元素出现在正常流中，相对于其正常位置定位。position:absolute，元素离开文档流，相对于除static之外的第一个父元素定位。了解position的属性后，才能更好的设计和实现页面。