Warum "display: table-cell" ist kaputt, wenn "position: absolute"

Lief ich in ein seltsames problem. Ich benutze DIV als container, und legen Sie ein Bild in diesem DIV. Ich möchte dieses Bild ausgerichtet werden, die senkrecht nach unten. Der folgende code funktioniert.

#banner { 
  width: 700px; 
  height: 90px; 
  top: 60px; 
  left: 178px; 
  overflow: hidden; 
  text-align: center; 
  display: table-cell; 
  vertical-align: bottom; 
  position: relative;
}

<div id="banner">
  <img src="http://www.google.de/intl/de_de/images/logo.gif"/>
</div>

Aber wenn ich den css-code "position: relative" auf "position: absolute", wird das Bild nicht ausgerichtet werden, um unten mehr. Ist das ein bug von Firefox3? Wie kann ich dieses problem lösen?

Meine aktuelle Lösung ist:

<div id="banner">
  <table width="100%" height="100%"><tr><td valign="bottom" align="center">
  <img src="http://www.google.de/intl/de_de/images/logo.gif"/>
  </td></tr></table>
</div>

Aber ich weiß nicht, wie diese Lösung.

InformationsquelleAutor stanleyxu2005 | 2009-10-22
  1. 8

    Kurze Antwort:
    Ändern

    top: 60px;

    zu

    bottom: 60px;

    Lange Antwort:

    Die Erklärung position: absolute nimmt Ihr element aus, wo es ist und legen Sie es relativ zum innersten element, das nicht als static deklariert. In nicht mehr an der Ausrichtung der jedes anderen Elements, damit es nicht mehr zu dienen als Tisch-Zelle (die Erklärung hat keine Wirkung). Zusätzlich, Erklärung wie top: 10px bedeutet, um es zu platzieren, dass viel Abstand von der Oberseite des element enthalten.

    Deklaration eines Elements als position: relative macht die Erklärung wie top: 10px bedeutet 'bewegen Sie das element 10px von oben von der aktuellen position'. Es ist möglich, Elemente deklariert, die relativ zu überschneidungen mit anderen Elementen, obwohl Sie sollten Bedenken, dass die ursprüngliche position immer noch bestimmt die Anordnung der anderen Elemente.

    Ich hoffe, diese Antwort Ihre Frage.

    • Weil ich möchte die DIVs können überlappt werden. Wenn DIVs haben, die relative position, können Sie sich nicht überlappen, können Sie?
    • Ich aktualisiert meine Antwort.
    InformationsquelleAutor RichN
  2. 2

    Könnte man auch versuchen Sie, eine position:relative; container, das macht den banner (das # - banner position:relative; und die img position:absolute), dann setzen der absoluten position-bottom:0 ein, richten Sie es an der Unterseite des Behälters. Wenn es die ganze Seite, sondern legen Sie die Breite und Höhe des Containers auf 100%, und entfernen Sie extra padding/margin auf den Körper oder auf den div.

    • Danke, gut zu wissen "- bottom:0" es machen können, ausgerichtet nach unten. Wie die Bild-ausrichten-Mitte? Ich habe eine Lösung, um text in der Mitte: einfügen eines inneren DIV und legen Sie die "line-height: height_of_outer_div". Eine andere Sache, ich will es ändern zur Laufzeit. Wenn ich schreiben muss völlig verschiedene knifflige css-code für die drei Positionen, es ist nicht nett.
    • Es ist auf eine funktionierende Webseite? Um es dem display in der Mitte, setzen Sie einfach das margin:0 auto;, das element benötigen, um eine Breite, obwohl, je nach container-element. Um das Bild auszurichten, um ein div... das ist der trick, Teil. Es ist eine css-Tabelle trick, wie Sie versucht haben, und die line-trick. Sie können auch nur pad das element, wenn es immer die gleiche Breite, aber in der Regel nicht der Fall ist.
    InformationsquelleAutor CodeJoust
Schreibe einen Kommentar