CSS-display div au-dessus d'un autre
je travaille actuellement sur une solution, où je dois afficher un message d'erreur au-dessus (z-index) d'une section.
l'attribut CSS overflow de la section est défini à scroll ou hidden. Cela fait que le message d'erreur est tronqué du côté gauche.
j'aime bien garder les DOM comme il est. Y a-t-il un moyen d'afficher le div pour le message d'erreur "above" le div bleu.
HTML :
<div>
<div id="div1">
div 1
</div>
<div id="div2">
div 2
<div id="msgErreur">
Error
</div>
</div>
</div>
**les 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;
}
1 réponses
Modifier: 2 façons d'y arriver. Élément (extra) relativement positionné dans un élément absolument positionné ou (nouveau) un élément absolument positionné et transform.
vous pouvez y parvenir en utilisant position: absolute sur le conteneur du message d'erreur et un div supplémentaire relativement positionné entre le conteneur et le message.
Le DOM est légèrement modifié mais sans déplacer des blocs entiers de code, peut-être que c'est D'accord avec vos exigences?
pertinents 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;
}
EDIT: c'est 2016 et transform: translate(X, Y) est compatible avec un grand nombre de navigateurs (IE9+, selon caniuse.com).
Voici une autre façon de réaliser ce dont OP avait besoin, sans élément supplémentaire:
#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>