我把它放在蓝色元素行重叠的地方。但由于某种原因,底部的 div
文本 foo
仍被推送为流。为什么是这样?我希望 foo
位于左侧并且不受 z-index
影响。
.goal-container {
width: 900px;
}
.progress-column {
display: inline-block;
float: left;
margin-top: 10px;
}
.goal-upper-well {
display: inline-block;
float: left;
background-color: @purple-blue;
width: 500px;
position: relative;
z-index: 2;
}
.goal-lower-well {
height: 300px;
width: 700px;
margin-top: -42px;
position: relative;
z-index: 0;
}
.goal-upper {
height: 43px;
position: relative;
z-index: 2;
}
<div class="goal-container">
<div class="goal-upper">
<div class="well well-sm goal-upper-well">
<button type="button" class="btn-small expand-button"
ng-click="isNavCollapsed = !isNavCollapsed"
aria-label="Left Align">
<span class="glyphicon glyphicon-plus"></span>
</button>
Goal: {{goal.desc}}
</div>
<div class="progress-column">
BARRRRRRRRRRR
</div>
</div>
<div class="goal-lower-well">
<div class="well well-lg goal-lower-well">foo</div>
</div>
</div>
最佳答案
这是因为您的 foo
文本上边距为负。只需将其删除,foo
文本就会转到左侧的下一行。
.goal-lower-well {
height: 300px;
width: 700px;
/* margin-top: -42px; */ Remove it
position: relative;
z-index: 0;
}
关于css - 位于下方时受文档流影响的文本元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40984036/