：点上面关注
免费学习前端知识！
CSS的position属性指定了应用到元素上的定位类型，如下是4个可能出现的属性值：
static
默认属性。指定元素按照常规的文档内容流（对多数西方语言而言就是从左往右、从上到下）进行定位。静态定位的元素不能使用top、left和类似其他属性定位。欲对文档元素使用CSS定位技术，必先将其position属性设置为除此之外的其他3个属性值。
absolute
该值指定元素是相对于它包含的元素进行定位。相对于所有其他的元素，绝对定位的元素是独立定位的，它不是静态定位的元素中文档流的一部分。它的定位要么是相对于最近的定位祖先元素，要么是相对于文档本身。
fixed
该值指定元素是相对于浏览器窗口进行定位的。固定定位的元素总是显示在那里，不会随着文档其他部分而滚动。类似绝对定位的元素，固定定位的元素和所有其他元素是独立的，它不是文档流的一部分。大多数现代浏览器支持固定定位，除了IE 6。
relative
当position属性设置为relative，元素按照常规的文档流进行布局，它的定位相对于它文档流中的位置进行调整。系统保留着元素在正常文档流中的空间，不会因为要填充空间而将其各边合拢，也不会将元素从新的位置“推开”。
一旦设置了元素的position属性为除了static以外的值，就可以通过元素的left、top、right和bottom属性的一些组合指定元素的位置。最常用的定位技术是使用left和top属性指定元素的左边缘到容器（通常是文档本身）左边缘的距离，元素的上边缘到容器上边缘的距离。例如，要放置一个距离文档左、上边缘各100像素的元素，可以在style属性中指定如下CSS样式：
＜div style="position:absolute;left:100px;top:100px;"＞
如果元素使用绝对定位，它的top和left属性应该解释为它是相对于其position属性设置为除static值以外的祖先元素。如果绝对定位的元素没有定位过的祖先，则它的top和left属性使用文档坐标进行度量——就是相对于文档左上角的偏移量。如果你想相对于一个属于常规文档流中的容器绝对定位一个元素，则将容器的position指定为relative，top和left指定为0px。这就让容器变成了动态定位，但它仍留在文档流中原来的位置。任何绝对定位元素的子元素都相对于容器进行定位。
虽然使用left和top指定元素的左上角位置是最常见的定位方法，但也可以使用bottom和right指定元素相对于容器的下和右边缘进行定位。例如，让一个元素的右下角就在文档的右下角进行定位（假设元素没有嵌套在其他动态元素中），使用如下样式：
position:absolute;right:0px;bottom:0px;
定位一个元素让其右、上边缘相对于窗口右、上边缘各10像素，并且不随文档的滚动而滚动，可以使用如下样式：
position:fixed;right:10px;top:10px;
除了定位元素以外，CSS允许指定它们的尺寸。这通常通过指定width和height样式属性的值完成。例如，以下HTML代码创建了一个绝对定位的空元素。它的width、height和background-color属性使得它看上去显示为一个蓝色的小方块：
＜div style="position:absolute;top:10px;left:10px;
width:10px;height:10px;background-color:blue"＞＜/div＞
另外一种指定元素的宽度的方法是同时指定left和right属性。同样，通过指定top和bottom属性来指定元素的高度。但是，如果同时指定left、right和width，那么width属性将覆盖right属性；如果元素的高度重复限定height属性优先于bottom属性。
请牢记，没必要给每一个动态元素指定尺寸，某些元素（如图片）具有固有尺寸。而且，对包含文本或其他流式内容的动态元素通常指定想要的宽度就足够了，让元素内容布局来自动决定它的高度。
CSS指定位置和大小属性是有单位的。在上面的例子中，定位和尺寸属性值以"px"结尾，代表像素。也可以使用英寸（"in"）、厘米（"cm"）、点（"pt"）和字体行高（"em"，一种当前字体行高的度量）。
相对于使用上面的单位来指定绝对定位和尺寸，CSS也允许指定元素的位置和尺寸为其容器元素的百分比。例如，以下HTML代码创建了一个黑边框空元素，它的宽度和高度为其容器元素（或是浏览器窗口）的50%，居中显示：
＜div style="position:absolute;left:25%;top:25%;width:50%;height:50%;
border:2px solid black"＞＜/div＞
完
看前端技术文章，就在Web前端精髓
