我正在為我的一個朋友建立一個網站，但我無法將 div 放在左邊，然后將影像放在右邊的每個角落。這是一個圖表來解釋：圖表
我真的不知道如何定位這一切??，同時還要保持它對移動設備的回應任何幫助表示贊賞！
uj5u.com熱心網友回復：
讓我們首先創建左右部分，然后創建這三個元素
您可以使用彈性盒來創建設計的兩個部分，或者如果您不想撰寫大量代碼，可以使用引導程式
這個例子是純 CSS
.parent{
display: flex;
flex-wrap: wrap;
}
.left,.right{
width: 50%;
}
@media (max-width:768px){
.left,.right{
width: 100%;
}
}
或者，如果您鏈??接引導檔案，則不需要額外的 CSS（前 div 將是左邊的，后者將是右邊的）
<div class="col-12 col-md-6"></div>
<div class="col-12 col-md-6"></div>
現在，對于這三個元素，您應該使用 CSS 定位
我無法解釋所有關于定位的資訊，因為它很多，但是我們有兩種型別的職位需要你的情況
職位：絕對
位置：相對
如果你定位一個相對元素并使用如下屬性：top、bottom、right、left、z-index。元素會根據自己的默認位置移動
但是如果你定位一個元素Absolute，這個元素會從他自己的父親中提取出來（不再被認為是父親的內容），如果你使用像top、bottom、left、right這樣的屬性，你的元素將根據他的第一個非靜態父親移動
這意味著 CSS 將查找元素父親，如果父親的位置屬性設定為任何值但靜態（這是位置的默認值） CSS 將根據該父親移動元素，如果父親具有靜態位置，CSS 將查找元素的祖父和以此類推，直到可以找到非靜態父級，如果沒有找到 CSS 將根據 body 元素定位元素
現在，您希望將三個專案放置在右側元素中，讓我們為它們命名，.item1 .item2 .item3您可以將它們的位置設定為絕對并將它們的父親（右側）位置設定為相對
這樣，三個專案可以使用 top、bottom、left、right 和 z-index 在它們的父親之間移動
這是示例
.right{
position: relative ;
}
.item1,.item2,.item3{
position: absolute ;
}
.item1{
left: 50%;
top: 20px;
}
.item2{
left: 70%;
top: 120px;
}
.item3{
left: 50%;
top: 220px;
}
（數字只是舉例）
默認情況下，稍后放置在您的 html 中的元素將出現在 CSS 位置中的其他元素之上，您可以使用它來更改和修改z-index
它的規則很簡單，更高的數字意味著更高的層順序......
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/467690.html