当文档流在下面时受文档流影响的文本元素

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

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

foo

Answer 2

你需要从浮动

中清除接下来的两个div

.goal-container {
  width: 900px;
}

.progress-column {
  display: inline-block;
  clear: left;
  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 {
  clear: left;
  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>