我想渲染一些相对彼此相邻但绝对位于其他所有元素之上的元素。您可以看到here以获得我要渲染的内容,并看到下面的小提琴(或this codepen)可以帮助我使其正常工作。谢谢!
.row {
display: flex;
}
.box {
height: 100px;
width: 100px;
background: yellow;
border: 2px solid red;
margin: 5px;
}
.tallBox {
height: 150px;
width: 100px;
background: orange;
border: 2px solid green;
margin: 5px;
}
.bar {
height: 100px;
width: 442px;
background: pink;
border: 2px solid red;
margin: 5px;
}
.group {
display: flex;
// position: absolute;
}
.gap {
height: 100px;
}
<h2>Proposal: </h2>
<img src="https://i.imgur.com/n1juYRj.png">
<div class="gap"></div>
<h2>Current rendering without any changing any position properties:</h2>
<section class="row">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</section>
<section class="row">
<div class="bar"></div>
</section>
<div class="gap"></div>
<h2>Attempt:</h2>
<section class="row special">
<div class="box"></div>
<div class="group">
<div class="tallBox"></div>
<div class="tallBox"></div>
</div>
<div class="box"></div>
</section>
<section class="row">
<div class="bar"></div>
</section>
答案 0 :(得分:1)
您可能会考虑负边距并避免使用position:absolute
.row {
display: flex;
}
.box {
height: 100px;
width: 100px;
background: yellow;
border: 2px solid red;
margin: 5px;
}
.tallBox {
height: 150px;
width: 100px;
background: orange;
border: 2px solid green;
margin: 5px;
margin-bottom:-50px;
}
.bar {
height: 100px;
width: 442px;
background: pink;
border: 2px solid red;
margin: 5px;
}
.group {
display: flex;
z-index:2;
}
.gap {
height: 100px;
}
<section class="row special">
<div class="box"></div>
<div class="group">
<div class="tallBox"></div>
<div class="tallBox"></div>
</div>
<div class="box"></div>
</section>
<section class="row">
<div class="bar"></div>
</section>
答案 1 :(得分:0)
这是我问题的解决方案:
.row {
display: flex;
}
.box {
height: 100px;
width: 100px;
background: yellow;
border: 2px solid red;
margin: 5px;
}
.tallBox {
height: 150px;
background: orange;
border: 2px solid green;
width: 100px;
position: absolute
}
.tallBox-container {
positin: relative;
width: 100px;
margin: 5px;
}
.bar {
height: 100px;
width: 442px;
background: pink;
border: 2px solid red;
margin: 5px;
}
.group {
display: flex;
// position: absolute;
}
.gap {
height: 100px;
}
<section class="row special">
<div class="box"></div>
<div class="group">
<div class="tallBox-container">
<div class="tallBox"></div>
</div>
<div class="tallBox-container">
<div class="tallBox"></div>
</div>
</div>
<div class="box"></div>
</section>
<section class="row">
<div class="bar"></div>
</section>