当文件流在底下时受到文本元素的影响

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

来源

2016-12-05 dman

的z-index没有做任何事情，只要确定浏览器的渲染流程明确未来2周的div。它主要用于确定事物“堆叠”的顺序，或者在通过元素进行标记时确定事物的顺序。如果你想从渲染流程中移除某些东西，你可以使用position：absolute。 – Ryan

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

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

来源

2016-12-05 22:01:43

您定义从浮

.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>

来源

2016-12-05 22:06:49

当文件流在底下时受到文本元素的影响

回答

相关问题