我需要幫助來創建以下視圖。我絕對可以使用絕對位置，但是有沒有辦法在不使用絕對值的情況下做到這一點？
uj5u.com熱心網友回復：
.balls {
display: flex;
}
.balls>.left {
height: 2.3rem;
width: 2.4rem;
border-radius: 50%;
margin-right: -0.9rem;
border: 4px solid white;
background-color: red;
}
.center_ball {
z-index: 99999;
}
.left_ball2 {
z-index: 9999;
}
.right_ball2 {
z-index: 99;
}<div class="balls">
<div class="left"></div>
<div class="left left_ball2"></div>
<div class="left center_ball"></div>
<div class="left right_ball2"></div>
<div class="left"></div>
</div>uj5u.com熱心網友回復：
我認為是這樣的？添加一個display: flex以使它們保持在同一行，并添加一個負數margin以使它們相互覆寫。
.balls {
display: flex;
}
.balls > .left {
height: 2.3rem;
width: 2.4rem;
border-radius: 50%;
margin-right: -0.9rem;
border: 4px solid white;
background-color: red;
}<div class="balls">
<div class="left"></div>
<div class="left"></div>
<div class="left"></div>
<div class="left"></div>
<div class="left"></div>
</div>uj5u.com熱心網友回復：
在這里，您有一個帶有實時示例的片段
.first {
z-index: 1;
border: 2px solid blue;
position: relative;
}
.second {
z-index: 2;
left: -60px;
position: relative;
top: 10px;
border: 2px solid red;
}
.third {
z-index: 1;
left: -100px;
position: relative;
border: 2px solid green;
}<div>
<img src="https://fr.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-fr.svg" class="first">
<img src="https://fr.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-fr.svg" class="second">
<img src="https://fr.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-fr.svg" class="third">
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/480324.html