CSS_定位

CSS定位(Positioning)

含义：

• CSS定位属性允许你对元素进行定位
• 定位的基本思想，它允许你定义元素框相对于其他正常位置该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置
• position属性可以控制Web浏览器如何以及在何处显示特定的元素
• 可以使用position属性把一个元素放置到网页中的任何位置

CSS position属性

通过使用position属性，我们可以选择四种不同类型的定位，这回影响元素框生成的方式。
position属性值的含义：

• static

默认值，元素没有开启定位
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中

• relative

开启元素相对定位
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留

• absolute

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

相对定位

• 设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
• 每个元素在页面的文档流中都有一个自然位置。相对于这个位置对元素进行移动就称为相对定位。周围的元素完全不受此影响
• 当将position属性设置为relative时，则开启了元素 的相对定位
• 当开启了相对定位以后，可以使用top、right、bottom、left四个属性对元素进行定位
• 通常偏移量之需要使用两个就可以对一个元素进行定位，一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位

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

例：如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。

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

相对定位.png

相对定位特点

• 如果不设置元素偏移量，元素位置不会发生变化
• 相对定位是相对于元素在文档流中原来的位置进行定位
• 相对定位不会使元素脱离文本流。元素在文本流中的位置不会改变
• 相对定位不会改变元素原来的特性，块还是块，内联还是内联
• 相对定位会使元素的层级提升，使元素可以覆盖文本流中的元素

绝对定位

• 设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框
• 绝对定位使元素的位置与文档流无关因此不占据空间，这一点与相对定位不同，相对定位实际上被看做普通流定位模型的一部分，因此元素的位置相对于它在普通流中的位置
• 绝对定位指使元素相对于html元素或离他最近 的祖先定位元素进行定位。
• 当将position属性设置为absolute时，则开启 了元素的绝对定位。
• 当开启了绝对定位以后，可以使用top、right、 bottom、left四个属性对元素进行定位

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

绝对定位.png

• 绝对定位的元素的位置相对于最近的已定位祖先元素，如果没有已定位的祖先元素，那么它的位置相对于最初的包含块
  注释:根据用户代理的不同，最初的包含块可能是画布或HTML元素
  提示:因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素。通过设置z-index属性来控制这些框的堆放次序

对于定位的主要问题是要记住每种定位的意义。所以，相对定位使‘相对于’元素在文档中的初始位置，而绝对定位使‘相对于’最近的已定位祖先元素，如果不存在已定位祖先元素，那么‘相对于’最初的包含块。

绝对定位的特点

• 绝对定位会使元素完全脱离文本流
• 绝对定位的块元素的宽度会被其内容撑开
• 绝对定位会使行内元素变成块元素
• 一般使用绝对定位时会同时为其父元素指定一个相对定位，以确保元素可以相对于父元素进行定位

固定定位

• 固定定位的元素会被锁定在屏幕的某个位置上，当访问者滚动网页时，固定元素会在屏幕上保持不动。会固定在浏览器窗口某个位置，不会随滚动条滚动
• 当将position属性设置为fixed时，则开启了元素的固定定位。
• 当开启了固定定位以后，可以使用top、right、bottom、left四个属性对元素进行定位。
• 固定定位的其他特性和绝对定位类似。
• IE6不支持固定定位

z-index

• 当元素开启定位以后就可以设置z-index这个属性。
  这个属性可以提升定位元素所在的层级。
• z-index可以指定一个整数作为参数，值越 大元素显示的优先级越高，也就是z-index 值较大的元素会显示在网页的最上层。