Css 文本元素位于下方时受文档流影响

我把它放在蓝色元素行重叠的地方。但由于某种原因，底部的

div

text

foo

仍被推到流中。为什么会这样？我希望

foo

位于左侧，并且不受流的影响，因为

z-index

.goal容器{
宽度：900px；
}
.进度栏{
显示：内联块；
浮动：左；
边缘顶部：10px；
}
.上井{
显示：内联块；
浮动：左；
背景色：@紫蓝色；
宽度：500px；
位置：相对位置；
z指数：2；
}
.目标较低{
高度：300px；
宽度：700px；
边缘顶部：-42px；
位置：相对位置；
z指数：0；
}
.进球上限{
高度：43px；
位置：相对位置；
z指数：2；
}

目标：{{Goal.desc}}
巴瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞
福

这是因为您的

foo

文本的上边距为负数。只需删除它，

foo

文本将转到左侧的下一行

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

---

你必须清除下面两个浮球

.goal容器{
宽度：900px；
}
.进度栏{
显示：内联块；
清除：左；
浮动：左；
边缘顶部：10px；
}
.上井{
显示：内联块；
浮动：左；
背景色：@紫蓝色；
宽度：500px；
位置：相对位置；
z指数：2；
}
.目标较低{
清除：左；
高度：300px；
宽度：700px；
边缘顶部：-42px；
位置：相对位置；
z指数：0；
}
.进球上限{
高度：43px；
位置：相对位置；
z指数：2；
}

目标：{{Goal.desc}}
巴瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞瑞
福

z-index对于确定浏览器的渲染流没有任何作用。它主要用于确定事物“堆叠”的顺序，或者在元素间切换时它们接收焦点的顺序。如果要从渲染流中删除某些内容，则需要使用position:absolute。