[CSS] 定位和清除浮动_html/css_WEB-ITnose

定位

盒子的位移属性 top right bottom left 用于指定元素的位置和方向，这些属性只能在元素的 position 属性设置了 relative absolute fixed 的值时生效。

对于relative ，位移属性指的是元素目前位置到原位置的偏移量，即元素与其原位置的边缘之间的距离。

对于absolute fixed ，位移属性指的是元素与父元素的边缘之间的距离。（ absolute 根据的是非 static 父元素，或者 body ， fixed 根据的是浏览器窗口）

static

元素都有 position 属性，其默认值是 static ，这也意味着，它们没有也不接受位置属性设置。（ top right bottom left ）

relative

relative 元素在页面中仍是正常的、静态的，属于自然流。其他元素不会占用其原来的位置。

如果同时设置了 top bottom ， top 优先级高于 bottom 。

如果同时设置了 left right ，取决于页面所用语言是从左到右 ltr 还是 从右到左 rtl 。

absolute

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 元素会相对于浏览器窗口进行定位，并且不会随滚动条进行滚动。

fixed 常用于在页面低端呈现横幅，例子如下：

FixedFooter 

footer {  bottom: 0;  left: 0;  right: 0;  position: fixed;} 

z-index

要设置 z-index 属性，首先要设置 position 属性为 relative absolute fixed 之一。一般来说，元素出现的时候就放置在 z 轴上。先出现的元素要低于后出现的。可以直接使用 z-index 来控制这种层叠顺序。元素的 z-index 值越高将会出现在越上面。

清除浮动

Box 1