Absolute Position kann jemand erklären, diese

StackOverflow https://stackoverflow.com/questions/97683

  •  01-07-2019
  •  | 
  •  

Frage

Hier ist ein Ausschnitt von CSS, die ich brauche, erklärte: 

#section {
    width: 860px;
    background: url(/blah.png);
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -445px;
}

Ok, so ist es die absolute Positionierung eines Bildes, offensichtlich.

  1. top ist wie Polster von oben, nicht wahr?
  2. , was noch übrig ist 50% tun?
  3. Warum ist der linke Rand bei -445px?

Update: Breite 860px. Das eigentliche Bild ist 100x100, wenn das macht einen Unterschied ??

War es hilfreich?

Lösung

  1. Top ist der Abstand von der Oberseite des HTML-Elements oder, wenn dies in einem anderen Elemente mit absoluter Position ist, von der Oberseite davon.

  2. & 3. Es ist auf der Breite des Bildes hängt aber es könnte horizontal zum Zentrieren des Bildes (wenn die Breite des Bildes ist 890px). Es gibt andere Möglichkeiten horizontal obwohl ein Bild zu zentrieren. Häufiger wird diese vertikal um einen Block von bekannter Höhe zum Zentrum verwendet (dies ist der einfachste Weg, vertikal etwas bekannten Höhe zum Zentrum): 

    top: 50%
margin-top: -(height/2)px;

Andere Tipps

Dies ist wahrscheinlich, um geschehen auf der Seite des Elements zum Zentrum (mit dem "Totpunkt" -Technik).

Es funktioniert wie folgt: das Element Unter der Annahme ist 890px breit, es ist auf position:absolute und left:50%, die ihren legt linken Rand in der Mitte des Browsers ( na ja, es könnte das Zentrum von einem anderen Elemente mit position:relative sein).

Dann wird die negative Marge auf verwendet bewegt der linke Rand , um den eine Distanz gleich linke Hälfte des Elements Breite , wodurch es zu zentrieren.

natürlich, das kann es nicht genau sein Zentrierung (es hängt, wie breit das Element tatsächlich ist, gibt es keinen width im Code, den Sie eingefügt, so ist es unmöglich, sicher zu sein), aber es Platzierung sicherlich das Element in Bezug auf das Zentrum auf der Seite

  

top ist wie padding von rechts oben?

Ja, die oben auf der Seite.

  

, was noch übrig ist 50% tun?

Es geht um den Inhalt in der Mitte des Bildschirms (100% der ganzen Weg nach rechts wäre.)

  

Warum ist der linke Rand bei -445px?

Nachdem es bewegt sich mit „links: 50%“. Dieses bewegt es 445 Pixel zurück nach links

Das Snippet bezieht sich oben auf ein Element mit einer ID des Abschnitts (könnte ein div, spanne, Bild oder auch anders sein).

Das Element hat ein Hintergrundbild von blah.png, die in beiden Richtungen X und Y wiederholt.

Die obere Kante des Elements positioniert 0px (oder andere Einheiten) wird von der Spitze seines Elternelement, wenn das Mutter auch absolut positioniert ist. Wenn das übergeordnete das Fenster, es am oberen Rand des Browserfensters wird.

Das Element haben wird es linken Rand positioniert 50% von der linken Seite davon geordneten Elements linken Rand ist.

Das Element wird dann "bewegt" 445px aus, dass 50% -Punkt links.

Sie werden alles, was Sie durch das Lesen von bis wissen müssen, erfahren Sie auf der CSS Boxmodell

Wenn absolute Position ist, ist oben vertikaler Abstand von dem übergeordneten (wahrscheinlich dem Body-Tag, also 0 der obere Rand des Browserfensters ist). Links 50% Abstand ist von der linken Kante. Die negative Marge bewegt es nach links zurück 445px. Wie, warum, ist Ihre Vermutung so gut wie meine.

Auf der Gefahr wie Captain Obvious klingen, ich werde versuchen, es so einfach wie möglich zu erklären.

Nach oben ist eine Zahl, die die Anzahl der Pixel bestimmt man es von der Spitze sein will, was auch immer html-Element oben ist ... so nicht unbedingt der obere Rand der Seite. Seien Sie vorsichtig bei Ihrer HTML-Formatierung, wie Sie Ihre CSS-Design.

Ihr links auf 50% sollte es in die Mitte des Bildschirms bewegen, da es 50. Denken Sie daran, die Menschen verschiedene Bildschirmgrößen haben und mit dem (0,0) oben links des Bildes zugeordnet sind, nicht das Zentrum es wird nicht perfekt sein, um das Zentrum des eigenen Bildschirm zugewiesen wie man erwarten kann es des Bildes, so zu.

Aus diesem Grunde ist die margin-left auf -445 Pixel used-- ist es weiter über zu bewegen, festgelegt.

Viel Glück, ich hoffe, dass dies Sinn. Ich habe versucht, meine Erklärung anders, falls Wort andere Antworten waren immer noch Sie eine harte Zeit. Sie waren große Antworten auch.

(Wenn Sie zwei verschieden große Monitore haben, schlage ich vor, mit dem Code um die liebäugelt, um zu sehen, wie jede Modifikation unterschiedlich großen Bildschirmen wirkt!)

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top