我有一个元素(div2),我想将其定位在div1下方,我想使用position:relative
进行此操作。
当我使用position:relative
时,div2显然会影响div1和div3的位置,但是我希望div2不会影响它们的位置,即div1和div3的位置应与div2删除或与div2相同。包含在代码中。
这可以通过position: absolute
来实现,因为它将元素带出了文档流,但是随后我失去了将div2降低到以下水平的相对位置,我觉得我需要(或者可以更轻松地) div1。
#middle-row{
margin-top: 25px;
height: 60px;
width: 100vw;
display: flex;
justify-content: space-around; }
.block {
height: 100%;
width: 10vw;
border: 1px solid white;
border-radius: 10px;
position: relative;
display: inline-block;
background-color: blue;
color: black }
.block span {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
font-size: 85%;
width: max-content; }
.block .block-input {
background-color: green;
position: relative; }
<div id="middle-row">
<a href="#">
<div class="block"><span>Div1</span></div>
<div class="block block-input"><span>Div2</span></div>
</a>
<a href="#">
<div class="block"><span>Div3</span></div>
</a>
</div>
答案 0 :(得分:0)
CSS-Grid可以在flexbox的帮助下做到这一点。
#middle-row {
margin-top: 25px;
height: 60px;
width: 100vw;
display: grid;
justify-content: space-around;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 10vw;
}
.col {
display: flex;
flex-direction: column;
grid-row: 1 / span 2;
}
.block {
height:10vw;
width: 10vw;
border: 1px solid white;
border-radius: 10px;
position: relative;
background-color: blue;
color: black
}
.block span {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
font-size: 85%;
width: max-content;
color:white;
}
.block .block-input {
background-color: green;
position: relative;
}
<div id="middle-row">
<a href="#" class="col">
<div class="block"><span>Div1</span></div>
<div class="block block-input"><span>Div2</span></div>
</a>
<a href="#">
<div class="block"><span>Div3</span></div>
</a>
</div>
答案 1 :(得分:0)
检查子元素是否具有绝对位置