CSS-Position absolut - nächstes positioniertes Element ist Körper?

Zitiert aus msdn:CSS-Position absolut - nächstes positioniertes Element ist Körper?

„Objekt positioniert ist, relativ zu positions- oder Körpern Objekt der übergeordneten Elements, wenn das Mutterelement nicht positioniert ist“

Nehmen sie mir einen div eingestellt mit bestimmter Dimension bis zum Boden 0; und links: 0; es wird nicht am Boden des Körpers positioniert, sondern links unten von viewport. Auch wenn der Körper einen Rand erhält - das Div wird immer noch unten links von viewport sein.

Ich weiß, wie man mit diesen Eigenschaften arbeitet, aber ich suche nach Gründen. Ist es nicht der Körper, dem das absolute Element zugeordnet ist, wenn kein anderer Vorfahre positioniert ist? Vielen Dank! Hier

ist die Geige: http://jsfiddle.net/picbig/0p6rgv8f/

HTML:

<div id="large_box_greater_than_viewport"></div> 
<div id="absolute_cnt"></div>

CSS:

body{ 
    margin-left: 200px; 
} 
#large_box_greater_than_viewport{ 
    width: 900px; 
    height: 10000px; 
    background: red; 
} 
#absolute_cnt{ 
    position: absolute; 
    width: 65%; 
    bottom: 0; 
    left: 0; 
    height: 80px; 
    background: rgba(0,0,0,.7); 
}

Quelle

2015-09-18 Max Width

Als rblarson geschrieben: wenn die Position: relative auf dem Körperelement festgelegt ist, es zu Boden des Körpers bewegt. Aber sollte diese Einstellung für den Körper nicht standardmäßig gemäß der Aussage von msdn sein (und viele andere Quellen sagen dasselbe)? –

Absolut positionierte Elemente werden relativ zu ihrem umgebenden Block positioniert.

fixed positioniert Elemente in Bezug auf die initial containing block, die die Abmessungen der viewport nimmt.

Anfängliche umschließenden Block

der umschließende Block, in dem das Wurzelelement lebt, ist ein Rechteck die anfänglichen umschließenden Block genannt. Für kontinuierliche Medien hat es die Dimensionen des Ansichtsfensters und ist am Canvas-Ursprung verankert; Es ist der Seitenbereich für seitenweise Medien.

Und absolute positionierten Elemente hinsichtlich ihren umschließenden Block, die von den nächsten Vorfahren mit einem position von etwas anderes als static hergestellt wird. h. fixed, absolute oder relative.

Der entscheidende Punkt ist:

Wenn es keine solche Vorfahre ist, der umschließende Block der anfänglichen enthaltenden Block ist.

daher, dass absolute positioniertes Element innerhalb <body> nicht mit dem Bezug auf die <body> selbst, sondern auf den Anfangsblock enthält, das heißt das Darstellungsfeld platziert werden.

http://www.w3.org/TR/CSS2/visudet.html#containing-block-details

Quelle

2015-09-18 12:57:14

so ist es in der Tat das Ansichtsfenster .... danke für das –

sollte immer w3.org zuerst lesen, bevor Sie zu Mdn gehen, msdn ... danke –

Sie müssen die Position des Körpers setzen:

body{ 
    margin-left: 200px; 
    position:relative; 
}

Quelle

2015-09-18 12:38:04 rblarsen

Das ist richtig - sobald der Körper in Position gebracht wird: relativ; Es bewegt sich nach unten des Körpers, aber sollte nicht diese Einstellung auf dem Körper standardmäßig gemäß der Aussage von msdn sein (und viele andere Quellen, die dasselbe behaupten)? –

Ich glaube, die Standardeinstellung für alle Elemente ist 'position: static;' – rblarsen

ja abgesehen vom Körper, wie ich immer zumindest geglaubt habe - dann fragte mich ein Student von mir und ich konnte ihm keine akzeptable Antwort geben. –

-1

1). Ja, Sie können dem Tag absolute Position geben, aber Sie müssen dieses Tag in ein anderes Tag mit relativer Position einfügen.

2). Oder Sie können dies mit vorheriger Funktionalität tun.

Quelle

2015-09-18 12:53:07

Ich habe einige Muster in verschiedenen Browsern versucht, und Sie haben Recht!

Das Objekt wird nicht relativ zum Körper positioniert, es sei denn, der Körper ist ebenfalls positioniert!

Wenn der Körper nicht positioniert ist, wird das Objekt relativ zum Ansichtsfenster positioniert.

Quelle

2015-09-18 12:54:05

CSS-Position absolut - nächstes positioniertes Element ist Körper?

Antwort

Verwandte Themen