CSS中物体位置的变化

一、相对定位

.box1 {
    position: relative;
    left: 20px;
    top: 30px;
}

相对定位会将元素的位置相对于原来的位置进行偏移。在例子中，元素 .box1 相对于它原来的位置向右偏移 20px，向下偏移 30px。

二、绝对定位

.box2 {
    position: absolute;
    left: 50px;
    top: 40px;
}

绝对定位会将元素的位置相对于它的最近的已定位的父元素进行偏移。如果没有已定位的父元素，则相对于文档进行定位。在例子中，元素 .box2 相对于它的父元素进行偏移，向右偏移 50px，向下偏移 40px。

三、固定定位

.box3 {
    position: fixed;
    left: 80px;
    top: 50px;
}

固定定位会将元素的位置相对于浏览器窗口进行偏移，即使页面滚动，元素的位置也不会改变。在例子中，元素 .box3 相对于浏览器窗口进行定位，向右偏移 80px，向下偏移 50px。

四、浮动

.box4 {
    float: left;
}

浮动会将元素向左或向右浮动，使得它脱离文档流并且尽可能地靠近它相邻的元素。在例子中，元素 .box4 向左浮动。

五、flex布局

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}
.box5 {
    margin: 10px;
}

flex布局是一种新的布局方式，可以让元素在容器内进行自由的定位和分布。在例子中，.container 容器采用 flex 布局并将所有元素都进行居中对齐，.box5 元素则根据 margin 属性进行相对定位。