css - 位于下方时受文档流影响的文本元素

Question

我把它放在蓝色元素行重叠的地方。但由于某种原因，底部的 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>

Answer 1

这是因为您的 foo 文本上边距为负。只需将其删除，foo 文本就会转到左侧的下一行。

.goal-lower-well {
  height: 300px;
  width: 700px;
  /* margin-top: -42px; */ Remove it
  position: relative;
  z-index: 0;
}