CSS自学笔记（7）:CSS定位

浏览数：22 / 时间：2015年06月09日

很多时候，我们需要对一些元素进行自定义排序、布局等，这是就需要用到CSS的定位属性了，用这些属性对一些元素进行自定义排序、布局等操作，可以改变浏览器默认的死板的排序。

CSS定位的功能很容易理解，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

CSS的定位(position)属性有四种不同的定位类型，从而影响元素框的声称方式。

CSS 内边距属性

属性	描述	备注
static	元素框正常生成	块级元素生成一个矩形框，作为文档流的一部分。行内元素则会创建一个或多个行框，置于其父元素中。
relative	元素框偏移某个距离	元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute	元素框从文档流完全删除，并相对于其包含块定位	包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed	元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

CSS的定位机制：普通流，浮动，定位

1.普通流

普通流中的元素框的位置是由(X)HTML中的位置决定的。

块级元素从上到下依次排列。

框之间的垂直距离有框的margin属性计算得到，行内元素在一行中水平布局。

2.定位

定位有相对定位和绝对定位之分。

相对定位，就是要定位的元素会（相对于普通流中的位置）偏移某个距离，元素仍保持其未定位以前的形状，它原本所占用的空间继续保留。移动元素可能会覆盖其他元素。

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

绝对定位，就是将要定位的元素框从普通流中完全删除，并相对与其包含块(可能是文档中另一个元素或者是初始包含块)定位。该元素原先在普通流中所占用的空间会关闭。

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

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

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

3.浮动

浮动，可以左右移动元素框，只得到它的边缘碰到包含框或者另一个浮动框为止。浮动的框脱离了普通流。

如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”

在CSS中，我们可以通过float属性来完成浮动效果。

浮动的效果可以用在很多元素中

div{
  float:right;
  width:120px;
  margin:0 0 15px 20px;
  padding:15px;
  border:1px solid black;
  text-align:center;
}

使段落的首字符浮动于左侧，并向这个字符添加样式

span{
  float:left;
  width:0.7em;
  font-size:400%;
  font-family:algerian,courier;
  line-height:80%;
}

也可以用浮动效果来完成一列具有超链接的菜单

ul{
  float:left;
  width:100%;
  padding:0;
  margin:0;
  list-style-type:none;
}
a{
  float:left;
  width:7em;
  text-decoration:none;
  color:white;
  background-color:#06C;
  padding:0.2em 0.6em;
  border-right:1px solid white;
}