當文件流在底下時受到文本元素的影響

我把它放在藍色元素行重疊的位置。但由於某種原因，底部的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

當文件流在底下時受到文本元素的影響

回答

相關問題