Boîte CSS/ombre qui se chevauchent problème de z-index

Veuillez jeter un oeil à l'extrait de code: http://codepen.io/anon/pen/JItLa

J'essaie de montrer à 2 rangées de blocs avec différentes quantités d'éléments dans une rangée.
Le hover événement devrait révéler le CSS de l'ombre, mais il y a un problème: la partie droite de la bordure de l'ombre se superpose avec le bloc suivant.
Vous dirais que la solution ici est d'utiliser display:inline-block qui laisse des interstices entre les blocs, mais je n'ai pas besoin de lacunes. Les blocs doivent rester en collant les uns aux autres, mais le droit de l'ombre doivent se chevaucher sur le bloc suivant onhover.

CSS:

html,
body {
  margin: 0;
  padding: 0
}
.wrapper {
  width: 100%;
  margin-top: 20px
}
.tile,
.tile2 {
  float: left;
  background: #f2f2f2
}
.tile {
  width: 25%
}
.tile2 {
  width: 33.3%;
  border-left: 1px solid #ddd
}
.tile:hover,
.tile2:hover {
  -webkit-box-shadow: 0 0 2px rgba(255, 255, 190, .75), 0 0 23px 1px #000;
  -moz-box-shadow: 0 0 2px rgba(255, 255, 190, .75), 0 0 23px 1px #000;
  box-shadow: 0 0 2px rgba(255, 255, 190, .75), 0 0 23px 1px #000
}
.header {
  padding: 20px 0px 10px;
  text-align: center
}
.clear {
  clear: both
}

HTML:

<div class="wrapper">
  <div class="tile">
    <div class="header">some text</div>
  </div>
  <div class="tile">
    <div class="header">some text</div>
  </div>
  <div class="tile">
    <div class="header">some text</div>
  </div>
  <div class="tile">
    <div class="header">some text</div>
  </div>
  <div class="clear"></div>
</div>
<div class="wrapper">
  <div class="tile2">
    <div class="header">some text</div>
  </div>
  <div class="tile2">
    <div class="header">some text</div>
  </div>
  <div class="tile2">
    <div class="header">some text</div>
  </div>
  <div class="clear"></div>
</div>

Comment est-ce possible?

Il y a un autre problème: quand j'ajoute de la frontière entre les blocs de la dernière blocs de passe à la ligne suivante ce qui n'est pas OK. Voir la 2e rangée dans l'exemple donné ci-dessus.

InformationsquelleAutor Andreas | 2013-11-26
  1. 13

    Ajouter un z-index de l'élément sur le vol stationnaire.

    En outre, l'élément doit être placé pour que le z-index propriété. Donc ajouter position:relative trop.

    9.9.1 Spécifiant le niveau de la pile: le 'z-index' propriété

    z-index: s'Applique à: les éléments en position

    Chaque boîte a une position en trois dimensions. En plus de leurs positions horizontale et verticale, les boîtes se situent le long d'un "axe z" et sont mis les uns sur les autres. L'axe Z de positions sont particulièrement pertinentes lorsque les boîtes de chevauchement visuellement. Cette section traite de la façon dont les boîtes peuvent être positionnés le long de l'axe des z.

    Mise À Jour Codepen - il fonctionne maintenant.

    .tile:hover, .tile2:hover {
    z-index: 1;
    position: relative;
}

    Pour répondre à votre deuxième question, les éléments apparaissent sur une nouvelle ligne en raison de leurs largeurs ne s'additionnent pas, comme il est 1px à cause de la frontière.

    33.3% + 33.3% + 33.3% + 1px != 100%

    Vous avez quelques options différentes:

    • Utilisation calc() soustraire 1px à partir de la largeur - width: calc(33.3% - 1px)

    • Changer le modèle de boîte à inclure la frontière dans la largeur de l'élément de calcul - box-sizing

    Si vous choisissez d'utiliser box-sizing, vous avez besoin auprès de fournisseurs/préxe ne si vous souhaitez une aide dans tous les navigateurs. Je voudrais utiliser quelque chose comme:

    .tile2 {
    width: 33.3%;
    border-left: 1px solid #ddd;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

    mise à Jour de Codepen à l'aide de box-sizing.

    • Merci beaucoup! Les travaux de cette. Je jouais avec z-index auparavant, mais il ne fonctionne pas pour moi. Il semble que la "position:relative' de roches. Mais je ne comprends pas comment il fonctionne. J'apprécierais beaucoup si vous pouviez expliquer la façon dont il fonctionne. Ne voulez pas de simplement copier/coller de la solution, mais veulent comprendre son origine. Merci à l'avance.
    • Bon, j'ai mis à jour ma réponse. Selon W3 la z-index propriété uniquement s'applique aux éléments positionnés dans les DOM. Comme pour la raison pour laquelle, je ne peux que deviner ses parce que l'élément n'existe pas dans les 3 dimensions, comme il n'est pas positionné. Ainsi, la z-index n'a aucun effet.
    • Je VOUS remercie beaucoup. J'ai essayé le z-index seul et bien sûr, cela ne fonctionne pas. Tu viens de résoudre beaucoup de problèmes autour d'ici. 🙂
    InformationsquelleAutor Josh Crozier
  2. 0

    Ajouter le code CSS suivant, si vous n'avez pas besoin de l'écart entre les divs.

    .wrapper {
  text-align: center;
  font-size: 0px;
}
.tile,
.tile2 {
  display: inline-block;
}
.tile:hover,
.tile2:hover {
  z-index: 1;
  position: relative;
}
.header {
  font-size: 12px;
}
`
    InformationsquelleAutor Muhammad Hassaan