盒子的位移属性 top right bottom left 用于指定元素的位置和方向，这些属性只能在元素的 position 属性设置了 relative absolute fixed 的值时生效。
对于relative ，位移属性指的是元素目前位置到原位置的偏移量，即元素与其原位置的边缘之间的距离。
对于absolute fixed ，位移属性指的是元素与父元素的边缘之间的距离。（ absolute 根据的是非 static 父元素，或者 body ， fixed 根据的是浏览器窗口）
元素都有 position 属性，其默认值是 static ，这也意味着，它们没有也不接受位置属性设置。（ top right bottom left ）
relative 元素在页面中仍是正常的、静态的，属于自然流。其他元素不会占用其原来的位置。
如果同时设置了 top bottom ， top 优先级高于 bottom 。
如果同时设置了 left right ，取决于页面所用语言是从左到右 ltr 还是 从右到左 rtl 。
absolute 元素会脱离文档流。 absolute 元素需要至少一个祖先元素设置了 relative 或 absolute 属性，不然元素定位会相对于页面的主体 body 进行定位。
使用了 absolute 的元素可以指定垂直和水平的位移属性，使 absolute 元素相对于设置了 relative 的祖先元素边缘进行移位。负的位移属性会使元素移到盒子外面。
例如，如果一个absolute元素设置了 top 值为 50px 和 right 值为 100px ， absolute 元素会相对于其设置了 relative 的父元素的顶边向下移动 50px ，相对于父元素的右边向左移动 100px 。
但是，如果使用了 absolute 的元素没有进行任何盒子位移属性设置，那么 absolute 元素的顶部和左部会和设置了 relative 的父元素的顶边和左边重合。如果设置了一个盒子位移属性，比如说 top ，那么absolute元素垂直方向会进行移动，而水平位置默认还是左对齐。
当一个 absolute 元素没有明确指定高度和宽度，同时使用盒子位移的 top 和 bottom 属性时，会使元素的高度跨越整个容器。同样的，当这个元素同时使用位移 left 和 right 属性值，会使元素的宽度跨越整个容器。如果同时使用四个位移属性，会使元素的高度和宽度跨越整个容器。这个时候 absolute 元素的宽度和高度都是 100% 。
fixed 元素会相对于浏览器窗口进行定位，并且不会随滚动条进行滚动。
fixed 常用于在页面低端呈现横幅，例子如下：
footer { bottom: 0; left: 0; right: 0; position: fixed;} 要设置 z-index 属性，首先要设置 position 属性为 relative absolute fixed 之一。一般来说，元素出现的时候就放置在 z 轴上。先出现的元素要低于后出现的。可以直接使用 z-index 来控制这种层叠顺序。元素的 z-index 值越高将会出现在越上面。
Box 1 Box 2 Box 3
.box-set { background: #e8eae9;}.box { background: #8ec63f; height: 100px; float: left; margin: 10px; width: 200px;} 运行这段代码后，在 .box-set 的 div 本应有一个高亮的灰色背景，但所有的子元素浮动后，这个灰色的背景色是看不到的，因为它的 height 为 0 。
解决方法有两个，利用 overflow 或 clear 属性。
.box-set { background: #404853; overflow: auto;} 此方法存在缺点，例如，当你添加样式，或者将嵌套在里面的 span 元素移动到父容器的外面，或者你想给元素添加一个盒子阴影、制作一个下拉菜单时，元素的盒子阴影可能会在父元素内被切断。
.box-set:before,.box-set:after { content: ""; display: table;}.box-set:after { clear: both;}.box-set { *zoom: 1;} 为了方便，我们可以定义一个类名，把这个类名加到需要清除浮动的容器上。例如使用类名 group 。在需要清除浮动的容器上添加这个类名 group 。
HTML和CSS高级指南之二——定位详解
下载本文