"position: absolute" usage in CSS

eine HTML-Bedenken Sie:"position: absolute" usage in CSS

<html> 
    <body> 
     <div id="outer"><div id="inner"></div></div> 
    </body> 
<html>

Und seine CSS:

#inner { 
    height: 75px; 
    width: 75px; 
    background-color: red; 
    position: absolute; 
    margin-left: 20px; 
} 
#outer { 
    height: 1500px; 
    width: 150px; 
    background-color: green; 
    position:static; 
    margin-left: 100px; 
}

Von dem, was ich verstehe, das innere div eine 20px linken Rand vom html haben sollte Element und nicht von der äußeren div als die äußere div hat eine statische Position. Aber es scheint, dass das innere div sich immer relativ zum äußeren div positioniert. Was fehlt mir hier?

Wenn jemand helfen kann, danke.

EDIT:

Quelle: www.codecademy.com

Quelle

2016-04-20 AarCee

'position: absolute' ist relativ zum ersten nicht statisch positionierten Element positioniert – scoots

Ein Element mit der Position: absolut; wird relativ zum nächsten positionierten Vorfahren positioniert (anstatt relativ zum Ansichtsfenster positioniert zu werden, wie fixiert). Jedoch; Wenn ein absolut positioniertes Element keine positionierten Vorfahren hat, verwendet es den Dokumentkörper und bewegt sich mit dem Seitenscrollen. Fügen Sie diesen Code zu Ihrer #inner-Klasse hinzu: left: 0px; – aghilpro

* "Von dem, was ich verstehe, sollte das innere Div ein 20px linken Rand von dem HTML-Element haben" * - was? Das ergibt keinen Sinn. Angenommen, ich habe ein Element in der Mitte der Seite, ich füge 'margin-left: 20px;' hinzu, es sollte sich 20px von der Mitte weg bewegen, nicht von den Kanten des '' Elements. Margin ist nicht die Eigenschaft, die für absolute Positionselemente verwendet werden soll –

position: absolute; entfernt das Element von der normalen Strömung und positioniert sich in Bezug auf den am nächsten positionierten Vorfahr. Wenn keine vorhanden ist, positioniert es sich auf den ursprünglichen umschließenden Block, der die Dimensionen des Ansichtsfensters annimmt. Reference.

Trotzdem für absolute Elemente, sollte immer die x spezifizieren und Y-Dimensionen (zB top und left), ansonsten kann man einige ungeradeen Verhalten bekommen, wie beispielsweise seine Positionierung relativ zu einem static Vorfahren Element, das man beobachten . Sehen, was passiert, wenn top und left hinzugefügt werden:

#inner { 
 
    height: 75px; 
 
    width: 75px; 
 
    background-color: red; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    margin-left: 20px; 
 
} 
 
#outer { 
 
    height: 1500px; 
 
    width: 150px; 
 
    background-color: green; 
 
    margin-left: 100px; 
 
}

<html> 
 

 
<body> 
 
    <div id="outer"> 
 
    <div id="inner"></div> 
 
    </div> 
 
</body> 
 
<html>

Quelle

2016-04-20 05:34:34 timolawl

Das Element relativ zu seinem ersten positionierten (nicht statisch) Vorfahren Elemente positioniert ist. Somit wird sich das innere Div basierend auf dem übergeordneten Element positionieren, das es enthält, in diesem Fall das "äußere" div.

Quelle

2016-04-20 05:37:01

"position: absolute" usage in CSS

Antwort

Verwandte Themen