CSS Box shadow/überlappende Ausgabe z-index
Bitte werfen Sie einen Blick auf das code-snippet: http://codepen.io/anon/pen/JItLa
Ich versuche zu zeigen 2 Reihen von Blöcken mit unterschiedlichen Menge von Elementen in einer Zeile.
Das hover-Ereignis zeigen, sollten die CSS-Schatten, aber es gibt ein problem: der Rechte Rand der Schatten überlappt wird mit dem nächsten block.
Würden Sie sagen, dass die mögliche Lösung hier ist die Verwendung von display:inline-block, dessen Blätter die Lücken zwischen den Blöcken, aber ich brauche nicht die Lücken. Die Blöcke bleiben sollte klebrig aber der Rechte Schatten sollte sich den nächsten block 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>
Wie ist das möglich?
Gibt es ein anderes problem hier: wenn ich die Grenze zwischen den Blöcken die letzten Blöcke bewegt, um die nächste Zeile ist nicht OK. Siehe 2. Zeile im Beispiel oben angegeben.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Hinzufügen
z-index
, um das element auf schweben.Zusätzlich das element auch positioniert werden muss, um für die
z-index
- Eigenschaft, um zu arbeiten. Daher fügen Sieposition:relative
zu.Aktualisiert Codepen - es funktioniert jetzt.
Um auf Ihre zweite Frage, sind die Elemente, die auf eine neue Zeile, da Ihre Breite nicht addieren, wie es ist
1px
aus wegen der Grenze.33.3%
+33.3%
+33.3%
+1px
!=100%
Haben Sie ein paar verschiedene Optionen:
Verwenden
calc()
zu subtrahieren1px
von der Breite -width: calc(33.3% - 1px)
Ändern Sie den box-Modell, um die Grenze in die Breite des Elements Berechnung -
box-sizing
Wenn Sie
box-sizing
, müssen Sie geeignete Anbieter/pră axe, wenn Sie möchten, Unterstützung in allen Browsern. Ich würde so etwas wie:Aktualisiert Codepen mit
box-sizing
.z-index
- Eigenschaft nur gilt für positionierte Elemente in der DOM. Als für der Grund warum, kann ich nur erahnen, weil das element nicht vorhanden in 3 Dimensionen, denn es ist nicht positioniert. So, diez-index
hat keine Wirkung.Fügen Sie den folgenden CSS, wenn Sie nicht brauchen, den Abstand zwischen den divs.