一、相對定位
.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/zh-hant/n/253136.html
微信掃一掃 
支付寶掃一掃 