Heim > Artikel > Web-Frontend > Wie verwende ich CSS relativ? Detaillierte Erläuterung der Verwendung der relativen Positionierung in CSS

Wie verwende ich CSS relativ? Detaillierte Erläuterung der Verwendung der relativen Positionierung in CSS

不言Original: 2018-11-05 13:36:2111226Durchsuche

Es gibt vier Attributwerte im Positionsattribut von CSS: statisch (statisch), relativ (relativ), fest (fest), absolut (absolut). relative Positionierung in CSS. Schauen wir uns ohne weitere Umschweife an, wie man „relative“ in CSS verwendet.

Werfen wir zunächst einen kurzen Blick auf das Konzept der relativen Positionierung

Gemäß der Definition des W3C können wir wissen, dass die relative Positionierung ein sehr leicht zu verstehendes Konzept ist . Wenn ein Element relativ positioniert ist, erscheint es dort, wo es ist. Anschließend können Sie das Element „relativ“ zu seinem Ursprung verschieben, indem Sie eine vertikale oder horizontale Position festlegen.

Kurz gesagt, die Box eines Elements, das auf relative Positionierung eingestellt ist, wird um einen bestimmten Abstand versetzt. Das Element behält seine unpositionierte Form und den Platz, den es ursprünglich einnahm.

Nachdem wir das Konzept der relativen Positionierung in CSS gelesen haben, sprechen wir über die Verwendung von relativ im Detail

Wir alle verwenden die relative Positionierung in CSS auf diese Weise: position: relative ;

Schauen wir uns zunächst ein Beispiel an

<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
</style>
</head>
<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
</body>
</html>

Der Effekt ist wie folgt:

Wie verwende ich CSS relativ? Detaillierte Erläuterung der Verwendung der relativen Positionierung in CSS

Fertig Im obigen Beispiel kennen wir ungefähr eine einfache Verwendung der relativen Positionierung. Schauen wir uns als Nächstes andere Verwendungsmöglichkeiten der relativen Positionierung an.

Die restriktive Wirkung der relativen auf die absolute

Wir wissen, dass die absolute Positionierung das Positionierungsattribut seines ersten Vorfahrenelements ist, das kein statisches Attribut ist relative oder feste Positionierung Im Fall der absoluten Positionierung kann das Hinzufügen der Attribute „oben/links“, „rechts/unten“ und andere zu „absolut“ einen Versatz verursachen. Wenn „position: relativ“ jedoch zum übergeordneten Element hinzugefügt wird, wird die Versatzfähigkeit von „absolut“ durch das übergeordnete Element begrenzt.

Der begrenzende Effekt von Relativ auf den Überlauf

Sehen wir uns ein Beispiel an:

<div class="box">
    <div class="son"></div></div>
    <div class="box" style="position: relative">
    <div class="son"></div></div>

.box{
    overflow: hidden;
    width: 50px;
    height: 50px;
    background-color: #dddddd;
}
.son{
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: #cd0000;
}

In diesem Beispiel die Breite von .box und Die Höhe beträgt 50 Pixel, und die Breite und Höhe des .son-Elements betragen beide 100 Pixel. Obwohl das .box-Element mit overflow:hidden festgelegt ist, kann die Größe des .son-Elements immer noch nicht begrenzt werden 100 Pixel, und wenn .box festgelegt ist. Nach dem Festlegen des relativen Positionierungsattributs betragen Breite und Höhe des .son-Elements 50 Pixel.

Einschränkende Wirkung des Relativen auf den hierarchischen Z-Index

Die beiden Absolutwerte auf der Seite haben unterschiedliche Z-Indizes und ihre eigenen Ebenen, wenn die beiden Absolutwerte das übergeordnete Element sind Die Klasse hat einen Verwandten, ihre Hierarchie hängt vom relativen Z-Index der übergeordneten Klasse ab.

Das Obige ist der gesamte Inhalt dieses Artikels. Weitere Informationen zur relativen Positionierung von CSS finden Sie im CSS-Video-Tutorial.

Das obige ist der detaillierte Inhalt vonWie verwende ich CSS relativ? Detaillierte Erläuterung der Verwendung der relativen Positionierung in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css Static 父类 position overflow

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Was kann linear-gradient() in CSS tun? Verwendung von linear-gradient()Nächster Artikel：Was kann linear-gradient() in CSS tun? Verwendung von linear-gradient()

In Verbindung stehende Artikel

Mehr sehen