Position: festes Element innerhalb einer Position: relatives übergeordnetes Element. Welcher Browser rendert richtig?
Ich sehe eine Diskrepanz im Verhalten von Elementen mit fester Position 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 wäre es Ein statisches Element im übergeordneten Element. Ich kann keine offiziellen / anerkannten Unterlagen zu diesen Bedingungen finden. Sie geben im Grunde alle Folgendes an:
Fixed Positioning 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 nicht, wenn Sie einen Bildlauf ausführen. Positionieren Sie sie beim Drucken auf jeder Seite an dieser festen Position.
uf der anderen Seite scheint @Safari so zu rendern, wie es beschrieben ist, wo es nur im Ansichtsfenster fixiert ist, egal ob ich ein übergeordnetes Element auf relative ohne definierte Eigenschaften für oben / rechts / unten / links setze. Probieren Sie es in Safari aus, wenn Sie eine Chance haben, indem Sie auf das blaugrüne Div klicken, das es -100 Pixel von links positioniert. Der gelbe Balken bleibt im Ansichtsfenster fixiert:
http: //jsfiddle.net/bbL8Lh4r/2
So welcher Browser rendert das 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 statischen und festen Elementen 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;
}