Detaillierte Erklärung zur Lösung des Problems „Position: Fester fester Positionierungsversatz“

Frage

Die feste CSS-Positionierung position:fixed ist sehr einfach zu verwenden. Sie wird relativ zum Ansichtsfenster des Browsers positioniert. top:0;left:0 bedeutet in der oberen linken Ecke.

<Text>
  <div Klasse="Container">
  </div>    
</body>    
<Stil>
  .Container{
    Breite: 100px;
    Höhe: 100px;
    Hintergrund: #888;
    Position: fest;
    oben: 100px;
    links: 100px;
  }
</Stil>

Wenn das übergeordnete Element transformiert

<Text>
    <div Klasse="BFC-Box">
      <div Klasse="Container"></div>
    </div>
</body>
<Stil>
  .BFC-Box{
    Rand: 200px;
    Höhe: 200px;
    Breite: 200px;
    Rand: 2px durchgehend rot;
    transformieren: Skalierung(1);
  }
  .Container{
    Breite: 100px;
    Höhe: 100px;
    Hintergrund: #888;
    Position: fest;
    oben: 100px;
    links: 100px;
  }
</Stil>

Das feste Element wird jetzt relativ zu seinem übergeordneten Element positioniert.

Das ist wirklich ärgerlich, weil transform den Status eines Elements erhöht, wie in der W3C-Spezifikation beschrieben:

Bei Elementen, deren Layout durch das CSS-Boxmodell bestimmt wird, führt jeder andere Wert als „kein“ für die Transformation dazu, dass das Element zu einem umschließenden Block wird und das Objekt als umschließender Block für fest positionierte Nachkommen fungiert.

Bei Elementen, deren Transformation nicht „keine“ ist, wird die Positionierung beeinflusst.

Lösung

Ohne das Layout zu beeinflussen, können Sie das zu positionierende Element direkt unter den Body verschieben:

<Text>
  <div Klasse="BFC-Box"></div>
  <div Klasse="Container">
  </div>    
</body>    

Wenn die Bedienung der Elemente in der Komponente unpraktisch ist, können Sie js verwenden und vue als Beispiel nehmen:

<div ref="Container" Klasse="Container"></div>
montiert(){
  Dokument.Body.Anhängen(this.$refs['Container'])
}

Dies ist das Ende dieses Artikels zur Lösung des Problems „Position: Fester fester Positionierungsversatz“. Weitere relevante Inhalte zu „Position: Fester fester Positionierungsversatz“ finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!