一、相对定位
.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属性进行相对定位。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/253136.html
微信扫一扫 
支付宝扫一扫 