Wie würden Sie zwei Überschneidungen machen?

Brauche ich zwei divs zu sehen ein bisschen aus wie diese: 

    |               |
 ---|    LOGO       |------------------------
|   |_______________|  LINKS                |
|             CONTENT                       |

Was ist das schönste/eleganteste Weg, so dass Sie sich überlappen ordentlich? Das logo wird auf eine Feste Höhe und Breite und berühren den oberen Rand der Seite.

InformationsquelleAutor der Frage | 2008-11-06

  1. 63

    Nur mit negativen Margen, in der zweiten div sagen:

    <div style="margin-top: -25px;">

    Und stellen Sie sicher, dass der z-index-Eigenschaft, um die Schichtung, die Sie wollen.

    InformationsquelleAutor der Antwort TravisO

  2. 3

    Mit absoluter oder relativer Positionierung, die Sie tun können, alle Arten von überschneidungen. Sie haben wahrscheinlich soll das logo gestylt zu sein als solche:

    div#logo {
  position: absolute;
  left: 100px; //or whatever
}

    Hinweis: absolute position hat seine Exzentrizitäten. Dann haben Sie wahrscheinlich ein wenig Experimentieren, aber es sollte nicht allzu schwer sein, das zu tun, was Sie wollen.

    InformationsquelleAutor der Antwort sblundy

  3. 1

    CSS zu verwenden, setzen Sie die logo-div position absolute, und legen Sie die z-Reihenfolge vor dem zweiten div.

    #logo
{
    position: absolute:
    z-index: 2000;
    left: 100px;
    width: 100px;
    height: 50px;
}

    InformationsquelleAutor der Antwort FlySwat

  4. 1

    Wenn Sie möchten, das logo zu nehmen Raum, Sie sind wahrscheinlich besser von schweben nach Links und dann nach unten bewegen, den Inhalt mit margin, so in der Art wie dieses:

    #logo { 
float: left; 
margin: 0 10px 10px 20px; 
} 

#content { 
margin: 10px 0 0 10px; 
}

    oder was auch immer margin, die Sie wollen.

    InformationsquelleAutor der Antwort jishi

Schreibe einen Kommentar