CSS 定位

position 属性定义元素在页面上的定位方式。

CSS 定位方法

在网页上适当地定位元素是良好布局设计的必要条件。CSS 中有几种方法可用于定位元素。以下部分将逐一介绍这些定位方法。

静态定位

静态定位元素始终根据页面的正常流定位。默认情况下，HTML 元素定位为静态。静态定位的元素不影响由 top ，bottom， left ，right 和 z-index 特性影响。

.box {
    padding: 20px;
    background: #7dc765;
}

相对定位

相对定位的元件相对于其正常位置定位。

在相对定位方案中，元素的框位置根据正常流计算。然后，将盒从该正常位置，根据所述属性移位- top 或 bottom 和/或 left 或 right 。

.box {
    position: relative;
    left: 100px;
}

注意： 相对定位的元素可以移动并与其他元素重叠，但它会保留最初为正常流保留的空间。

绝对定位

绝对定位的元素相对于具有静态位置的第一父元素定位。如果找不到这样的元素，它将被定位在相对于浏览器窗口的“左上角”的页面上。框的偏移进一步可使用的属性的一个或多个指定，比如 top ， right ， bottom 和 left 。

绝对定位的元素完全从正常流中取出，因此在放置同级元素时不占用空间。但是，它可以根据 z-index 属性值重叠其他元素。此外，绝对定位的元素可以具有边距，并且它们不会与任何其他边距一起折叠。

.box {
    position: absolute;
    top: 200px;
    left: 100px;
}

固定定位

固定定位是绝对定位的子类别。

唯一的区别是，固定定位元素相对于浏览器的 viewport 是固定的，拖动时不会移动。

.box {
    position: fixed;
    top: 200px;
    left: 100px;
}

注意： 对于打印介质类型，固定定位元素在每个页面上呈现，并相对于页面框固定（即使在打印预览中）。仅当指定了 <!DOCTYPE> 时，IE7 和 IE8 才支持固定值。