Was ist absolute Positionierung in CSS?

In CSS ist die absolute Positionierung eine Positionierungsmethode, die die Position eines Elements unabhängig vom Dokumentenfluss macht. Die auf absolute Positionierung eingestellte Elementbox wird vollständig aus dem Dokumentfluss entfernt und standardmäßig relativ zu ihrem enthaltenden Block positioniert. Die absolut positionierte Position ist relativ zum Browser und wird in Verbindung mit oben, rechts, unten und links positioniert.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

In CSS ist die absolute Positionierung eine Positionierungsmethode, die die Position eines Elements unabhängig vom Dokumentenfluss macht.

Eine Elementbox, die auf absolute Positionierung eingestellt ist, wird vollständig aus dem Dokumentfluss entfernt und relativ zu ihrem enthaltenden Block positioniert, der ein anderes Element im Dokument oder der anfängliche enthaltende Block sein kann. Standardmäßig ist die absolute Positionierungsposition relativ zum Browser und wird mit oben, rechts, unten und links positioniert.

Der zuvor vom Element im normalen Dokumentenfluss belegte Platz wird geschlossen, als ob das Element nicht vorhanden wäre. Das Element generiert nach der Positionierung eine Box auf Blockebene, unabhängig davon, welche Art von Box es ursprünglich im normalen Ablauf generiert hat.

Werfen wir einen genaueren Blick auf die absolute Positionierung (absolut). Tatsächlich sind absolute Positionierung und Floating Float teilweise ähnlich. Wenn Sie Floating Float verstehen, wird es eine große Hilfe sein, die absolute Positionierung zu verstehen.

Lassen Sie uns zunächst über die Ähnlichkeiten zwischen absolut und float sprechen: wrapping und highly deceptive

wrapping

Man sagt, ein Bild sagt mehr als tausend Worte (der einzige Unterschied ist: das p im Bild Unten wurde „Absolut“ hinzugefügt. Was bedeutet es? Beispielsweise ist die Standardbreite des Inline-Elementbereichs adaptiv und funktioniert nicht, wenn Sie die Breite hinzufügen. Um die Breite festzulegen, müssen Sie span auf display:block setzen. Wenn Sie jedoch zu span absolute oder float-Werte hinzufügen, wird das Anzeigeattribut von span automatisch zu einem Block und die Breite kann angegeben werden. Wenn Sie also absolute/float und display:block gleichzeitig in CSS sehen, dann handelt es sich bei display:block um redundanten CSS-Code.

Hohe Täuschung

Im obigen Beispiel wird das Absolute zum p auf der äußeren Ebene des Bildes hinzugefügt, sodass der hohe Grad der Täuschung nicht gut widergespiegelt wird. Verschieben Sie das Absolute zum inneren Bild und der Effekt wird eintreten out:

<p style="border:4px solid blue;">
  <img  src="img/25/1.jpg" / alt="Was ist absolute Positionierung in CSS?" >
</p>
<p style="border:4px solid red; position: absolute;">
  <img  src="img/25/2.jpg" / alt="Was ist absolute Positionierung in CSS?" >
</p>

Wenn Sie die ausführliche Erklärung von CSS Float gelesen haben, werden Sie feststellen, dass der Effekt der gleiche ist. Aber die Prinzipien dahinter sind tatsächlich unterschiedlich und nicht genau gleich. Sie können es sehen, indem Sie etwas Text hinzufügen:

<p   style="max-width:90%">
  <img  src="img/25/1.jpg" / alt="Was ist absolute Positionierung in CSS?" >
</p>
<p style="border:4px solid red;">
  <img    style="max-width:90%" src="img/25/2.jpg" / alt="Was ist absolute Positionierung in CSS?" >
</p>

Auf dem Bild ist ersichtlich, dass der Text vom Bild verdeckt wird, was sich von Float unterscheidet. float täuscht dem übergeordneten Element vor, dass seine Höhe reduziert ist, das Float-Element selbst sich jedoch noch im Dokumentfluss befindet und der Text das Float-Element umgibt und nicht verdeckt wird.

Aber absolut kann nicht länger als Täuschung des übergeordneten Elements angesehen werden, sondern hat eine Ebenen-

-Beziehung. Wenn das übergeordnete Element im normalen Dokumentenfluss als sterblich betrachtet wird, ist das Absolute zu einem Unsterblichen geworden. In heutigen Begriffen befindet es sich nicht mehr in derselben Dimension. Aus Sicht des übergeordneten Elements ist das auf „Absolut“ gesetzte Bild vollständig verschwunden, sodass der Text von ganz links angezeigt wird. Der absolute Pegel ist hoch, sodass das Bild den Text überdeckt.

Ich erinnere mich, als ich zum ersten Mal mit CSS in Kontakt kam, das immer noch ein Dreckskerl mit einer Kampfkraft von 5 war, und ich wusste, dass Absolut das Konzept der Hierarchie haben könnte, ich fälschlicherweise dachte, ich hätte es jetzt vollständig verstanden Denken Sie darüber nach, es ist wirklich verwirrend (natürlich ist das keine schlechte Sache. Immer wenn Sie das Gefühl haben, dass Ihr früheres Ich wie ein Stück Tofu war, bedeutet das, dass Sie Fortschritte gemacht haben. Wenn Sie andererseits immer darüber nachdenken, wie Das bedeutet, dass Sie sich immer noch auf Ihren Lorbeeren ausruhen.)

Nachdem Sie über die oben genannte Grundlage verfügen, müssen Sie auch die folgenden Merkmale des Absoluten verstehen:

So bestimmen Sie den Ankerpunkt

und die relative Liebe und den Tod

Die Beziehung zum Z-Index
• Reduzieren Sie die Kosten für das Neuzeichnen und Reflow
So bestimmen Sie den Ankerpunkt

Sobald Absolut geschichtet ist, stellt sich zunächst die Frage, wo der Browser das Element anzeigen soll. Für Elemente im normalen Dokumentfluss kann der Browser die Position des Elements basierend auf der Größe und Position seiner übergeordneten, untergeordneten und Geschwisterelemente berechnen. Doch was tun nach dem Schichten? Die Grundidee ist wie folgt:

Der erste Fall: Der Benutzer gibt für das Element nur das Absolute an, aber nicht links/oben/rechts/unten. Zu diesem Zeitpunkt ist die Position des Ankerpunkts in der oberen linken Ecke des absoluten Elements die Position des Elements im normalen Dokumentfluss. Wie in der obigen Abbildung ist der Bildpanda das erste untergeordnete Element des übergeordneten Elements, sodass der Ankerpunkt in der oberen linken Ecke die obere linke Ecke des Inhalts des übergeordneten Elements ist.

Wenn Sie die Reihenfolge des Bildes Panda und des Textes unten ändern und es zum zweiten untergeordneten Element des übergeordneten Elements machen, sagt ein Bild mehr als tausend Worte:

<p style="border:4px solid red;">
  我是一个绝对定位的absolute元素
  <img    style="max-width:90%" src="img/25/2.jpg" / alt="Was ist absolute Positionierung in CSS?" >
</p>

结论重复一遍：未指定left/top/right/bottom的absolute元素，其在所处层级中的定位点就是正常文档流中该元素的定位点。

第二种情况：用户给absolute元素指定了left/right，top/bottom

先简单点，让absolute元素没有position:static以外的父元素。此时absolute所处的层是铺满全屏的，即铺满body。会根据用户指定位置的在body上进行定位。

只指定left时，元素的左上角定位点的left值会变成用户指定值。但top值仍旧是该元素在正常文档流中的top值：

 

<p   style="max-width:90%">
  我是一个绝对定位的absolute元素
  <img    style="max-width:90%" src="img/25/2.jpg" / alt="Was ist absolute Positionierung in CSS?" >
</p>

只指定right时，元素的右上角定位点的right值会变成用户指定值。但top值仍旧是该元素在正常文档流中的top值：

<p   style="max-width:90%">
  我是一个绝对定位的absolute元素
  <img    style="max-width:90%" src="img/25/2.jpg" / alt="Was ist absolute Positionierung in CSS?" >
</p>

只指定top时，元素的左上角定位点的top值会变成用户指定值。但left值仍旧是该元素在正常文档流中的left值：

 

<p   style="max-width:90%">
  我是一个绝对定位的absolute元素
  <img    style="max-width:90%" src="img/25/2.jpg" / alt="Was ist absolute Positionierung in CSS?" >
</p>

只指定bottom时，元素的左下角定位点的bottom值会变成用户指定值。但left值仍旧是该元素在正常文档流中的left值：

 

<p   style="max-width:90%">
  我是一个绝对定位的absolute元素
  <img    style="max-width:90%" src="img/25/2.jpg" / alt="Was ist absolute Positionierung in CSS?" >
</p>

通过对left/top/right/bottom的组合设置，由于没有position:static以外的父元素，此时absolute元素可以去任意它想去的地方，天空才是它的极限。

和relative相爱相杀

通常我们对relative的认识是（好吧，我承认，这是我战5渣渣时的认识。如果你是弗利萨，可以鄙视这句话）：relative主要用于限制absolute

上面已经说了，如果absolute元素没有position:static以外的父元素，那将相对body定位，天空才是它的极限。而一旦父元素被设为relative，那absolute子元素将相对于其父元素定位，就好像一只脚上被绑了绳子的鸟。

比如你要实现下图iOS里APP右上角的红色圈圈

通常的做法是将APP图片所处的p设成relative，然后红色圈圈设成absolute，再设top/right即可。这样无论用户怎么改变APP图片的位置，红色圈圈永远固定在右上角，例如：

.tipIcon {
  background-color: #f00;
  color: #fff;
  border-radius:50%;
  text-align: center;
  position: absolute;
  width: 20px;
  height: 20px;
  right:-10px;  //负值为自身体积的一半
  top:-10px;
}

<p style="display: inline-block;position:relative;">
  <img  src="img/25/2.jpg" / alt="Was ist absolute Positionierung in CSS?" >
  <span class="tipIcon">6</span>
</p>

这样做效果是OK的，兼容性也OK。但CSS的世界里要实现一个效果可以有很多种方式，具体选用哪个方案是见仁见智的。我比较看重的标准：一个是简洁，另一个是尽量让每个属性干其本职工作。

用这两个标准看待上述实现方法，应该是有改进的空间的。首先外层p多了relative未能简洁到极致。其次relative的本职工作是让元素在相对其正常文档流位置进行偏移，但父层p并不需要任何位置偏移，之所以设成relative唯一的目的是限制absolute子元素的定位点。因此在我看来这并没有让relative干其本职工作。好比小姐的本职工作是服务业，顺便陪客户聊聊天，但纯聊天聊完一个钟，恐怕会被投诉。

（学习视频分享：css视频教程）

Das obige ist der detaillierte Inhalt vonWas ist absolute Positionierung in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!