定位

1 定位概述

CSS 定位 (Positioning) 属性允许你对元素进行定位

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置

使用 display 属性改变生成的框的类型。将 display 属性设置为 block（块），可以让行内元素显示的像块级元素一样/*inline（内联）  inline-block（内联块）*/

position（位置） 属性值的含义：

static/*静态*/  元素框正常生成。

relative/*相对*/  元素框偏移某个距离。

absolute/*绝对*/  元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。

fixed/*固定*/  元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身

2 相对定位

对一个元素进行相对定位，它将出现在它所在的位置上，通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动

div {

  width: 200px;

  height: 200px;

  background-color: #766ac5;

  position: relative;

  top: 50px;

  left: 30px

}

运行效果：

在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

3 绝对定位

设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

div {

  width: 200px;

  height: 200px;

  background-color: #766ac5;

  position: absolute;

  top: 50px;

  left: 30px

}

运行效果：

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块

因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置z-index  属性来控制这些框的堆放次序。

div {

  width: 200px;

  height: 200px;

  background-color: #766ac5;

  position: absolute;

  top: 50px;

  left: 30px；

  z-index: -1

}

运行效果：

默认的 z-index 是 0。z-index -1 拥有更低的优先级。z-index 1 拥有更高的优先级。

4 浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

div {

  width: 200px;

  height: 200px;

  background-color: #766ac5;

  float: left

}

运行效果：

clear 属性规定元素的哪一侧不允许其他浮动元素。

div { clear: both }  /*清除两侧浮动*/

5，固定定位

div {

  width: 200px;

  height: 200px;

  background-color: #766ac5;

  position: fixed;

  top: 50px;

  left: 30px

}

运行效果：

固定定位它的相对移动的坐标是视图（屏幕内的网页窗口）本身，不会随滑动条的滑动而改变所在视图中的位置