Float ein DIV zentriert über einem anderen DIV

Ich versuche zu schweben ein div über ein anderes, aber in der Mitte (Breite).

EDIT: ich möchte den div-container werden über die top-div und zentriert.

Aktuellen CSS: 

body {
    background-color: #FFF;
    margin: auto;
}

#top {
    background-color: #F2F2F2;
    border-bottom: 1px solid #CCC;
    height: 150px;
    position: relative;
}

#container {
    background-color: #FFF;
    border: 1px solid #CCC;
    width: 920px;
    height:300px;
    position: absolute;
    top:0;
    right:auto;
}

Dies ist, was ich bekomme:
Float ein DIV zentriert über einem anderen DIV

InformationsquelleAutor ritch | 2010-10-21
  1. 5

    gesetzten Links:50%
    und margin-left:-460px (die Hälfte der Breite des div)

    • funktioniert gut, danke 🙂
    InformationsquelleAutor vinothkr
  2. 1

    Versuchen. Es ist ungetestet aber im Grunde muss man um die div-container relativ und dann das div in das absolute.

    body {
        background-color: #FFF;
        margin: auto;
    }

#top {
    background-color: #F2F2F2;
    border-bottom: 1px solid #CCC;
    top: 50%;
    left: 50%;
    position: absolute;
}

#container {
    background-color: #FFF;
    border: 1px solid #CCC;
    width: 920px;
    height:300px;
    position: relative;
    right:auto;
}
    InformationsquelleAutor Catfish
  3. 0

    Ich würde vorschlagen, Einstellung #top position-Attribut absolut-und mit ein wenig javascript, die Links-Attribut zu #container die Links + die Hälfte der #container Breite - die Hälfte der #top Breite.

    ich.e, nach dem einbinden von jQuery (ungetestet):


    $(document).ready(function(){

        var topLeft = $("#container").css("left") + ($("#container").css("width")/2) - ($("#top").css("width")/2);

        $("#top").css("left", topLeft);

    });

    In dem Fall, dass Links gleich null ist, wie das Beispiel, das Sie Gaben, dass $("#container").css("left") Begriff ist unnötig.

    EDIT: außerdem musst Du sicherstellen, dass die z-index-Attribute der beiden divs entsprechend.

    InformationsquelleAutor Ken Bellows
Schreibe einen Kommentar