定位方案有四种：静态定位、相对定位、绝对定位和固定定位。你可以使用CSS 3中的「position」属性来决定要使用的定位方式。
在这四种方案中，静态和相对定位不会影响整个文档的布局，而绝对和固定定位会与文档分开，因此页面不会为这两种类型的定位元素保留空间。 在默认状态下，所有元素都是静态放置的，即元素从上到下以及从左到右的顺序排列。
只要为元素设置了“ position”属性，就可以使用“ top”，“ right”，“ bottom”和“ left”属性精确定义其位置。
扩展资料：
相对定位中的“top”，“right”，“bottom”和“left”用于设置距元素原始位置的偏移量，但是绝对定位的四个属性不同。
在绝对定位中，“top”是指所定位元素上方的外部边界与容纳块上方的内部边界之间的距离。 换句话说，已定位元素的边距和包含块的边界将影响top的值，进而影响绝对定位元素的位置，但包含块的填充将不起作用。
在相对定位中，“top”是指被定位元素上方的外边界与其原始位置的上边缘之间的距离。“bottom”的含义类似于“top”，是指定位元素下方的外部边界与容纳块下方的内部边界之间的距离，“left”和“right”也是如此。
1、绝对定位 和 固定定位 的元素若没有设置 top/right/left/bottom 的值。其位置为原来在文档流中的位置。其他文档流元素会占据其原来位置。
要使绝对定位或固定定位的元素水平居中，需要设置其 width 为固定值，并且 left: 0right: 0。
2、绝对定位 和 固定定位 的元素，若其宽度 width 或高度 height 的单位为 百分比 ，宽度和高度值是相对于其基于定位的元素计算的。（在使用一些stick插件时尤其要注意这点）。
扩展资料：
CSS技巧
1、div的垂直居中问题 vertical-align:middle将行距增加到和整个DIV一样高 line-height:200px然后插入文字，就垂直居中了。缺点是要控制内容不要换行
2、 margin加倍的问题 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上 display:inline例如： <#div id=”imfloat”>相应的css为 #IamFloat{ float:leftmargin:5px/*IE下理解为10px*/ display:inline/*IE下再理解为5px*/}
3、浮动ie产生的双倍距离 #box{ float:leftwidth:100pxmargin:0 0 0 100px//这种情况之下IE会产生200px的距离 display:inline//使浮动忽略} 这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素)。
参考资料：百度百科 CSS（层叠样式表）_
固定定位：position:fixed固定定位是相当于“当前窗口”来进行的定位。
固定定位元素不再占空间，层级要高于普通元素，跟“浮动”很像。
固定定位元素，是一个“块元素”，换句话说，行内元素使用fixed定位，将转成“块元素”。
如果只指定了fixed定位属性，并没有设置偏移量，则“原地不动”。
绝对定位absolute
绝对定位元素，相对于“祖先定位元素”进行的定位。
如果父元素没有定位属性的话，则再往上找父定位元素，如果一直找到<body>元素，都没有找定位元素的话，则最终就相对于body来定位。
如果父元素是定位元素(相对或绝对)的话，那么绝对定位元素，就相对于该父元素进行定位。
绝对定位元素，不再占空间，层级要高于普通元素。
绝对定位元素，是一个“块元素”。
如果只指定absolute定位，并没有设置偏移量，则元素的位置不会改变(原地不动)。
