理解css的position属性_html/css_WEB-ITnose

目录

盒模型和定位类型

要清楚的理解css中的position属性，首先我们需要详细的了解 css盒模型

文档中的每个元素都被描绘为矩形的盒子，进而确定其大小(width,height),位置(left,top,right,bottom)，属性(color,background,border…)等。这种盒模型描述了元素内容占用空间。盒子有四个边界：外边距边界margin edge, 边框边界border edge, 内边距边界padding edge 与 内容边界content edge。如下图(图片来自w3school)：

定位模式规定了一个盒子在总的布局上应该处于什么位置，以及对周围的盒子有什么影响。而定位模式包括了常规的 文档流 ， 浮动 ，和 position定位 。 这篇文章主要学习position定位

css的position属性可以取5种值：

• position: static
• position: relative
• position: absolute
• position: fixed
• position: inherit

静态定位(static)

static 是position默认的属性值，任何应用 position:static 的元素都会处于常规文档流中，它所处的位置以及如何影响周边的元素都是由盒模型所决定的

一个 static 定位的元素会忽略所有top, right, bottom, left以及z-index属性所声明的值。如果想使用这些属性值，需要为它的position属性应用absolute, relative, fixed之一才有效。

绝对定位(absolute)

绝对定位的元素会完全从常规的文档流中脱离，对于包围它的元素来说，它们会将绝对定位元素视为不存在，就好像display属性设为none一样。可以通过top, right, left, bottom四个属性来设置绝对定位的元素，它们的默认值为auto。

绝对定位的关键点在于它的起点在哪里，比如设置 top: 20px ，那么这20px是从哪里开始计算的。

一个绝对定位的元素的起点位置是相对于它的第一个position值不为static的父元素而言的，比如：

1. 当你在一个元素的样式设置为 position:absolute
2. 如果该元素的父元素的position值不为static(而是relative,absolute,fixed,inherit), 那么绝对定位元素的起点为父元素的左上角位置，
3. 当该元素的父元素为默认值(static),那么就检查父元素的父元素是否有非static定位，如果该元素应用了(relative,absolute,fixed,inherit)定位，则它的左上角便会成为绝对元素的起始位置。
4. 如果还没有，就向上遍历DOM，直到找到一个非static定位元素或寻找失败到达最外层浏览器窗口，此时绝对定位元素会相对于文档窗口来定位。

看代码更容易明白：

See the Pen css-position-absolute by guihailiuli ( @guihailiuli ) on CodePen .

相对定位(relative)

如果将一个元素进行相对定位，它将根据top, left, bottom, left四个属性来决定自己的位置的,这些属性的设置让元素从默认位置移动。例如，top设置一个值“20px”在一个相对定位的元素上，这个元素会在原来位置向下移动“20px”。反之，“top”设置一个“-20px”，这个元素会在原来的位置向上移动“20px”。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。由于他们移向方向和距离不一样，可能使元素重叠在一起，看下面的效果：

See the Pen css-position-relative by guihailiuli ( @guihailiuli ) on CodePen .

在使用相对定位时，它在页面中仍然是正常的，静态的。在这种情况下，相对定位元素的默认位置还是被元素自身占用，其他元素不会占用相对定位元素当初的位置，可以理解为相对定位元素的位移是相对于元素自身的边缘进行位移。

事实上，一个相对定位元素同时设置了“top”和“bottom”位移属性值，实际上“top”优先级高于“bottom”。然而，一个相对定位元素同时设置了“left”和“right”位移属性，他们的优先级取决于页面使用的是哪种语言，例如，如果你的页面是英文页面，那么“left”位移属性优先级高，如果你的页面是阿拉伯语，那么“right”的位移属性优先级高。

固定定位(fixed)

固定定位和绝对定位类似，但是它定位是 相对于浏览器窗口 ，通过属性的 top, right, bottom, 和 left 属性来决定其位置,并且不会随滚动条进行滚动。也就是说，不管用户停留在页面那个地方，固定定位的元素将始终停留在页面的一个地方。“position”属性值中，仅有“fixed”属性值不能在IE6浏览器下运行.

See the Pen css-position-fixed by guihailiuli ( @guihailiuli ) on CodePen .

固定定位最常见的一种用途就是在页面中创建一个固定头部、或者脚部、或者固定页面的一个侧面。

See the Pen css-position-fixed-footer by guihailiuli ( @guihailiuli ) on CodePen .