Comment forcer les bordures css à s'afficher sur des pages superposées?

StackOverflow https://stackoverflow.com/questions/836415

  •  08-07-2019
  •  | 
  •  

Question

Je tente de coder les graphiques Box et Whiskers en HTML. Le problème est que j’ai des bordures autour d’une div (comme dans Box), mais ces bordures disparaissent lors de la superposition du calque précédent, qui contient une image couleur en bandes. La préférence est de ne pas utiliser une image d'arrière-plan (ni des couleurs) ici si je peux l'éviter.

Le code HTML est le suivant: 


<table cellspacing="0" cellpadding="0" id="BoxAndWhiskers" width="100%">
<tr class="graphArea">
<td><div class="graphColors"><img src="ReadingColorScale.png" width="100%" height="250" alt="" /></div>

<div class="graphBoxes"><img src="black.gif" width="2" height="50" alt="" class="Whisker" /><div class="graphBox"><img src="black.gif" width="100%" height="2" alt="" style="padding-top: 10px; padding-bottom: 10px;" /></div><img src="black.gif" width="2" height="50" alt="" class="Whisker" /></div></td>
</tr>
</table>

et le css est: 



table#BoxAndWhiskers tr.graphArea td {
    width: 33%;
}

table#BoxAndWhiskers tr.graphArea td div.graphBoxes {
    z-index: 1;
    margin-top: -250px;
}

table#BoxAndWhiskers tr.graphArea td div.graphBoxes img.Whisker {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

table#BoxAndWhiskers tr.graphArea td div.graphBoxes div.graphBox {
    margin: 0;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    border: 2px solid black;
}

Notez la marge supérieure de -250px dans le css de div.graphBoxes. Au fur et à mesure que ce nombre diminue, les bordures autour de la zone apparaissent à mesure qu'elles jaillissent du calque précédent.

Est-il possible de montrer les frontières dans ce cas? Merci ...

Était-ce utile?

La solution

Vous ne pouvez pas superposer un élément sans positionnement. 

.graphBoxes {
    position: relative;
    z-index: 1;
    margin-top: -250px;
}

Autres conseils

Il vous suffit probablement d’ajuster vos marges et vos rembourrages pour que les bordures affichent ce que vous souhaitez. Mon conseil est de supprimer tout le rembourrage et la marge, et d'ajouter 

* { margin: 0; padding: 0; }

en haut de votre feuille de style. Ensuite, ajustez tous les rembourrages et marges, largeurs et hauteurs pour donner l’impression que vous vous sentez.

Gardez à l'esprit que z-index ne s'applique pas aux éléments qui n'ont pas de propriété de position dans la feuille de style.

Une humble conjecture est que votre marge négative est à l'origine des problèmes.

Parfois, il arrive que la div n’ait aucune indication dans le fichier CSS, elle définit donc automatiquement la bordure ou le remplissage avec une valeur pix. Si vous spécifiez la balise img dans css, vous pouvez vous débarrasser de ce paramètre agaçant. Je suis totalement d'accord avec la réponse de position. Vous devez définir tout div ou autre sélecteur que vous créez comme relatif, statique, absolu, etc. Une explication exhaustive de la propriété position peut bien sûr être trouvée sur CSS W3C school.

J'espère que cela peut vous aider davantage!

Il est difficile de savoir exactement ce qui se passe sans image, mais je pense que si vous augmentez l'indice z du calque souhaité par dessus, vous le remplacez par 9999, puis changez l'indice z du calque situé en dessous à -100. travailler comme prévu.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top