Ich sehe eine Diskrepanz in der PositionElemente verhalten sich innerhalb eines relativ positionierten übergeordneten Elements. Gemäß den Dokumenten, die ich online finde, sollten FireFox und Chrome das Element im Ansichtsfenster und nicht im übergeordneten Fenster reparieren. Ich stelle jedoch fest, dass, wenn ich für ein festes Element keinen Links- / Rechts-Wert festlege, dieses sich in einer Art Mischung aus statischem UND fest in dem Sinne verhält, dass es vertikal zum Ansichtsfenster festgelegt ist, sich aber so bewegt, als ob Es war ein statisches Element innerhalb des übergeordneten Elements. Ich kann keine offizielle / respektierte Dokumentation zu diesen Bedingungen finden. Sie geben im Grunde alle Folgendes an:
Feste Positionierung Lassen Sie keinen Platz für das Element. Positionieren Sie es stattdessen an einer bestimmten Position relativ zum Ansichtsfenster des Bildschirms und verschieben Sie es beim Scrollen nicht. Positionieren Sie sie beim Drucken auf jeder Seite an dieser festen Position.
Safari hingegen scheint es so zu rendernes wird beschrieben, wo es nur im Ansichtsfenster festgelegt ist, egal ob ich ein übergeordnetes Element auf "Relativ" setze, ohne dass Eigenschaften für "Oben / Rechts / Unten / Links" definiert sind. Probieren Sie es in Safari aus, wenn Sie eine Chance haben, indem Sie auf die Knickente klicken div positioniert es -100 Pixel von links. Der gelbe Balken bleibt im Ansichtsfenster fixiert:
http://jsfiddle.net/bbL8Lh4r/2/
Welcher Browser rendert das also richtig? Alle meine Browser wurden auf den neuesten Stand gebracht. Zuerst dachte ich, Safari sei das Richtige, nur weil ich die Dokumente gelesen habe, aber FireFox und Chrome teilen dieselbe unterschiedliche Ansicht, in der es sich um eine Mischung aus statischem und feststehendem Verhalten zu handeln scheint.
HTML
<body>
<aside>
Blah
</aside>
<div class="container">
<div class="nav">
BLARGH
</div>
</div>
</body>
CSS
body,
aside,
.container,
.nav {
margin:0;
padding:0;
}
aside {
background:red;
width:30%;
height:800px;
float:left;
}
.container {
position:relative;
height:800px;
width:70%;
background:teal;
float:right;
}
.container.stickied {
left:-100px;
}
.container .nav {
position:fixed;
background:yellow;
width:inherit;
}
Antworten:
11 für die Antwort № 1Dies scheint ein interessanter Fall zu sein. Lassen Sie uns einen tiefen Einblick in die technischen Daten geben, um herauszufinden, was los ist.
TL; DR: Die W3-Spezifikation ist in diesem Bereich kritisch vage / undefiniert, aber es scheint, dass alle Browser von der Spezifikation abweichen, oder zumindest machten sie eineEntscheidung, wo Details undefiniert waren. Vier der wichtigsten Browser (Firefox, Chrome, IE und Opera) scheinen jedoch von der Spezifikation abzuweichen auf die gleiche Weise. Safari ist definitiv der seltsame Mann hier draußen.
Das sagt die CSS2.1-Spezifikation Kapitel 9: Visuelles Formatierungsmodell:
- 9.1.2 Blöcke enthalten - In CSS 2.In 1 werden viele Schachtelpositionen und -größen in Bezug auf die Kanten einer rechteckigen Schachtel berechnet, die als umschließender Block bezeichnet wird. Generierte Boxen fungieren im Allgemeinen als Blöcke für untergeordnete Boxen. Wir sagen, dass eine Box den umschließenden Block für ihre Nachkommen "einrichtet". Der Ausdruck "ein Kasten enthaltender Block" bedeutet "der enthaltende Block, in dem der Kasten lebt", nicht der, den er erzeugt.
Dies definiert nur, was ein enthaltender Block ist.
- 9.3 Positionierungsschemata - Absolute Positionierung: Im absoluten Positionierungsmodell wird eine Box vollständig aus dem normalen Fluss entfernt und eine Position in Bezug auf einen enthaltenden Block zugewiesen.
Das sagt absolut positionierte Elemente sind in Bezug auf einen enthaltenden Block positioniert.
- 9.6 Absolute Positionierung - Im absoluten Positionierungsmodell wird eine Box explizit in Bezug auf ihren enthaltenen Block versetzt. [...] Verweise in dieser Spezifikation auf eine absolut positioniertes Element (oder seine Box) implizieren, dass das Element "s
positionEigenschaft hat den Wertabsoluteoderfixed.
Das sagt absolut positionierte Elemente einschließen position:fixed; Elemente sowie position: absolute; Elemente.
- 9.6.1 Feste Positionierung - Die feste Positionierung ist eine Unterkategorie der absoluten Positionierung. Der einzige Unterschied besteht darin, dass für ein Feld mit fester Position der enthaltende Block vom Ansichtsfenster festgelegt wird.
Und das sagt position: fixed; Elemente haben das Ansichtsfenster (also nicht wörtlich das Ansichtsfenster, sondern ein Feld mit den gleichen Abmessungen und Positionen wie das Ansichtsfenster) als das enthaltende Feld. Dies wird später durch die Spezifikation in gesichert 10.1 Definition des enthaltenden Blocks</a>:
Wenn das Element "position: fixed" hat, wird der enthaltende Block vom Ansichtsfenster [...] festgelegt.
(Wenn Sie mit dem Ansichtsfenster nicht vertraut sind, handelt es sich um "ein Fenster oder einen anderen Anzeigebereich auf dem Bildschirm, über den Benutzer ein Dokument abrufen". Die Abmessungen des Ansichtsfensters bilden die Grundlage für das Anfangsblock enthalten. Der gesamte HTML-Inhalt (<html>, <body>usw.) befindet sich in diesem durch das Ansichtsfenster definierten Initialblock.)
deshalb, die <div class="nav"> Element mit position: fixed; angewendet sollte es einen enthaltenden Block haben, der dem Ansichtsfenster oder dem entspricht Anfangsblock enthalten.
Nun, da der erste Schritt zur Bestimmung der Eigenschaften der .nav Wenn das Element vollständig ist, können wir bestimmen, wie sich die Browser verhalten sollen.
Die CSS2.1-Spezifikation hat Folgendes zu sagen:
- 9.7 Beziehungen zwischen "Anzeige", "Position" und "Float" - Andernfalls, wenn "Position" den Wert "absolut" hatoder "fest", die Box ist absolut positioniert, der berechnete Wert von "float" ist "none" und die Anzeige wird gemäß der folgenden Tabelle eingestellt. Die Position der Box wird durch die Eigenschaften "oben", "rechts", "unten" und "links" und den Block der Box bestimmt.
Dies sagt uns im Grunde, dass zum Beispiel absolut positionierte Elemente (position: fixed; oder position: absolute;), irgendein float Eigenschaften werden ignoriert, das <div> Elemente (unter anderem) sind auf gesetzt display: block;und dass das Element gemäß seinen Box-Offset-Werten von positioniert ist top, right, bottom, und / oder left in Kombination mit dem anfänglich enthaltenden Block (dem Ansichtsfenster).
- 9.3.2 Box-Offsets: "oben", "rechts", "unten", "links" - Ein Element wird als positioniert bezeichnet, wenn esDie Eigenschaft "position" hat einen anderen Wert als "static". Positionierte Elemente erzeugen positionierte Kästchen, die nach vier Eigenschaften angeordnet sind: oben, rechts, unten, links.
Dies bestätigt nur die Tatsache, dass <div class="nav"> sollte entsprechend seinen Box-Offsets positioniert werden.
Obwohl es an mehreren Stellen heißt, wenn zwei entgegengesetzte Versatzwerte sind autoWenn sie dann auf Null gesetzt werden, scheint CSS2.1 nicht den Fall anzugeben, wie Elemente mit beiden positioniert werden sollen left und right Werte von Null. CSS Box Alignment Module Level 3erwähnt jedoch, dass der Wert auf "start" gesetzt ist, was definiert ist als:
Richtet das Ausrichtungsobjekt so aus, dass es bündig mit der Startkante des Ausrichtungscontainers ist.
Dies sollte bedeuten, dass das Element oben links im enthaltenden Block positioniert ist position: fixed; Elemente sollten mit dem Ansichtsfenster identisch sein. Wir können jedoch sehen, dass Dies ist bei allen gängigen Browsern nicht der Fall. Keiner der großen Browser scheinen die position: fixed;"s enthalten einen Block zu dem des Ansichtsfensters, wie in der Spezifikation angegeben. Stattdessen verhalten sich alle so, als ob das Verhalten zwischen den beiden identisch sein sollte position: fixed; und position: absolute;.
Zusammenfassend ist die Antwort klar, wenn Sie so viele Beweise in den eigenen Worten der Spezifikation haben: position: fixed; Elemente sollten einen enthaltenden Block haben, auf den gesetzt istdas Ansichtsfenster. Klar ist auch, dass alle Anbieter beschlossen haben, einen vagen Teil der Spezifikation auf ihre eigene Weise auszufüllen, mit dieser Erklärung in Konflikt zu stehen oder sie völlig zu ignorieren. Am wahrscheinlichsten ist, dass ein Browser ihre Interpretation implementiert hat (IE7 war der erste, der dies unterstützte position: fixed;Ich glaube, kurz gefolgt von Firefox 2.0) und der Rest folgte.
3 für die Antwort № 2
Beim Lesen der W3C-Spezifikation würde ich sagen, dass das Verhalten in Chrome / FF tatsächlich korrekt ist:
Die Position der Box wird nach dem "absoluten" Modell berechnet, aber zusätzlich ist die Box in Bezug auf eine Referenz festgelegt.
Die absoluten Modellpositionen relativ zum enthaltenden Block:
Die Position (und möglicherweise die Größe) der Box wird mit den Eigenschaften oben, rechts, unten und links angegeben. Diese Eigenschaften geben Offsets in Bezug auf den Block der Box an.
BEARBEITEN: Für ein Element mit fester Position wird die enthaltender Block wird als Ansichtsfenster definiert:
Wenn das Element "positioniert: fest" ist, wird der enthaltende Block bei Endlosmedien durch das Ansichtsfenster festgelegt
In dem Fall jedoch, in dem alle Positionierungseigenschaften auf gesetzt sind autoIch konnte keine Definition von genau was finden auto sollte ergeben. Daher definiert die Position des übergeordneten Elements die Anfangsposition des festen Elements, wenn keine andere Position angegeben ist. Außerdem bleibt das Element beim Scrollen wie angegeben in Bezug auf den Ansichtsfenster fest. Wenn sich das übergeordnete Element bewegt, wird das feste Element verschoben sollte sich mit seiner Ausgangsposition mitbewegen; das gleiche, wie Sie erwarten würden, dass es sich bewegt, wenn Sie das ändern left Eigentum.
Wenn es falsch ist, den Block mit seiner zu verschiebenEltern, dann ist es falsch, es zunächst basierend auf diesem Elternteil zu positionieren. Die einzige Alternative besteht darin, es in der oberen linken Ecke des Ansichtsfensters für Eigenschaften von zu positionieren auto. Wenn dies der Fall ist, implementieren alle Browser die Spezifikation falsch. Safari hat nur eine Implementierung, die falsch und inkonsistent ist.
Es ist anzumerken, dass gezeigtes Verhalten auftritt, unabhängig davon, ob das übergeordnete Element relativ positioniert ist oder nicht.