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 属性值。此外，绝对定位的元素可以有 margins，并且它们不会与任何其他边距一起折叠。

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

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

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

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

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