css - 在另一個之上顯示div

我目前正在研究一個解決方案，我必須在上面顯示一條錯誤消息（z-index）的一節。css - 在另一個之上顯示div

該部分的css溢出屬性設置爲scroll或hidden。這會導致錯誤消息在左側截斷。

我非常想保持DOM的狀態。有沒有辦法顯示錯誤消息「上方」的藍色div的div。

HTML：

<div> 
<div id="div1"> 
    div 1 
</div> 
<div id="div2"> 
    div 2 
    <div id="msgErreur"> 
     Error 
    </div> 
</div> 
</div>

** CSS：**

#div1 { 
width : 48%; 
border: 1px solid red; 
height: 150px; 
float:left; 
} 

#div2 { 
width : 48%; 
border: 1px solid blue; 
height: 150px; 
float:right; 
overflow-y:scroll; 
} 

#msgErreur { 
background:#942911; 
color:white; 
top:30px; 
left: -10px; 
width : 150px; 
height : 30px; 
position:relative; 
z-index:5; 
}

來源

2014-07-02 David Laberge

請張貼代碼中的問題 – Popnoodles

'的z-index：5px'應'z-index：5'。但這並不能解決問題 – Alp

@Alp感謝它現在已經修復了...... –

編輯：實現這一目標的2種方式。相對定位（額外）元素在絕對定位的元素或（新）絕對定位元素中，並且transform。

您可以通過在容器中使用錯誤消息的容器上的position: absolute以及相對位於容器和消息之間的額外div來實現此目的。
DOM稍有修改，但不移動整個代碼塊，也許它符合您的要求？

相關HTML：

<div id="msgErreur"> 
    <div>Error</div> 
</div>

相關CSS：

#msgErreur { 
    position: absolute; 
    z-index: 5; 
    color: white; 
} 
#msgErreur > div { 
    position: relative; 
    top: 30px; left: -10px; 
    width: 150px; height: 30px; 
    background: #942911; 
}

Fiddle

編輯：這是2016年transform: translate(X, Y)與大量瀏覽器兼容（IE9 +根據caniuse.com）。這裏實現什麼OP需要，具有無需額外元件的另一種方式：

#div1 { 
 
    width : 48%; 
 
    border: 1px solid red; 
 
    height: 150px; 
 
    float:left; 
 
} 
 
#div2 { 
 
    width : 48%; 
 
    border: 1px solid blue; 
 
    height: 150px; 
 
    float:right; 
 
    overflow-y:scroll; 
 
} 
 

 
#msgErreur { 
 
    background:#942911; 
 
    color:white; 
 
    /* top:30px; */ 
 
    /* left: -10px; */ 
 
    width : 150px; 
 
    height : 30px; 
 
    position: absolute; /* not relative anymore */ 
 
    /* z-index:5; It's already stacked above if positioned. Needed if other positioned elements are there (a value of 1 would be enough) */ 
 
    transform: translate(-10px, 30px); /* replaces relative positioning (left and top => X and Y) */ 
 
}

<div> 
 
    <div id="div1"> 
 
     div 1 
 
    </div> 
 
    <div id="div2"> 
 
     div 2 
 
     <div id="msgErreur"> 
 
      Error 
 
     </div> 
 
    </div> 
 
</div>

Codepen

來源

2014-07-02 19:42:22 FelipeAls

css - 在另一個之上顯示div

回答

相關問題