Wie überlappt man zwei Div in CSS?

Lesezeit: 1 Minute

Benutzeravatar von zey
Zey

ich habe zwei div Likes ,

<div class="imageDiv"></div>
<div class="imageDiv"></div>

und css Klasse ,

 .imageDiv
    {
        margin-left: 100px;
        background: #fff;
        display: block;
        width: 345px;
        height: 220px;
        padding: 10px;
        border-radius: 2px 2px 2px 2px;
        -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    }

Sie können das Ergebnis sehen Hier 🙂

Ich möchte diese beiden überlappen div Likes ,

Geben Sie hier die Bildbeschreibung ein

  • Sie müssen ihnen unterschiedliche Klassennamen geben und einen verschieben. vielleicht mit position relativ oder css3 translate

    – btevfik

    4. Mai 2013 um 8:01 Uhr

  • Mögliches Duplikat: CSS: Lassen Sie zwei schwebende Elemente überlappen

    – Shiva Charan

    4. Mai 2013 um 8:05 Uhr

  • ja , muss zwei klasse machen wie (.imgDivOne , .imgDivTwo ) 🙂 Können Sie mir ein Beispiel zeigen?

    – Zey

    4. Mai 2013 um 8:06 Uhr

zum zweiten div addieren bottomDiv

und füge dies zu CSS hinzu.

 .bottomDiv{
       position:relative;
       bottom:150px;
       left:150px;
    }

http://jsfiddle.net/aw8RD/1/

Benutzeravatar von Raab
Raab

Siehe Demo hier
Sie müssen eine zusätzliche calss für die zweite Div einführen

.overlap{
    top: -30px;
position: relative;
left: 30px;
}

  • +1, ich habe Likes bearbeitet > top: -100px;position: relative;left: 150px;

    – Zey

    4. Mai 2013 um 8:13 Uhr

Ich habe dich bearbeitet Geige
Sie müssen nur hinzufügen z-index zum Frontelement und positionieren Sie es entsprechend.

Benutzeravatar von Mi-Creativity
Mi-Kreativität

Überprüfen Sie dies Geige und wenn Sie das überlappte div verschieben möchten, setzen Sie seine Position auf absolute dann ändere es top und left Werte

Warum verwenden Sie nicht nur ein div und verwenden dann das Pseudoelement :: before oder ::after und setzen die Position dieses Pseudoelements auf absolut, dann setzen Sie oben: 100px und links 100px

1437050cookie-checkWie überlappt man zwei Div in CSS?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy