Was bedeutet Position in CSS? Was sind seine Werte und Funktionen? (Zusammenfassen)-CSS-Tutorial-php.cn

Was bedeutet Position in CSS? Was sind seine Werte und Funktionen? (Zusammenfassen)

藏色散人

Freigeben： 2018-10-16 13:44:43

Original

8574 Leute haben es durchsucht

Dieser Artikel stellt Ihnen hauptsächlich vor, was Position in CSS bedeutet und die Funktion aller Werte.

Für diejenigen, die Front-End-Entwicklung erlernen, ist das Attribut „Position“ in CSS von entscheidender Bedeutung. Einfach ausgedrückt bedeutet Position in CSS, den Positionierungstyp eines Elements anzugeben.

Was sind also die Attributwerte von

Position? Das heißt, Welche Positionierungstypen gibt es in CSS?

Im Folgenden werden wir anhand eines einfachen Codebeispiels den Wert von

Position und seine Funktion zusammenfassen und vorstellen.

1. Absolut

generiert ein

absolut positioniertes -Element, das im Gegensatz zur statischen Positionierung relativ zum ersten übergeordneten Element positioniert ist. Die Position des Elements wird über die Attribute „left“, „top“, „right“ und „bottom“ angegeben.

Codebeispiel:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>absolute使用示例</title>
<head>
    <style>
        h3.abs
        {
            position:absolute;
            left:50px;
            top:50px
        }
 </style>
</head>
<body>
<h3 class="abs">绝对定位（absolute）</h3>
<p>通过绝对定位，元素可以放置到页面上的任何位置。本例中下面元素距离页面左侧和顶部都是50px。</p>
</body>
</html>

Nach dem Login kopieren

Der Codeeffekt ist wie folgt:

Was bedeutet Position in CSS? Was sind seine Werte und Funktionen? (Zusammenfassen)

2, behoben

Generieren Sie absolut positionierte Elemente, die relativ zum Browserfenster positioniert sind. Die Position des Elements wird durch die Attribute „left“, „top“, „right“ und „bottom“ angegeben.

Codebeispiel:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>fixed使用示例</title>
<head>
    <style>
        p.a1
        {
            position:fixed;
            left:10px;
            top:10px;
        }
        p.a2
        {
            position:fixed;
            top:50px;
            right:50px;
        }
 </style>
</head>
<body>
<p class="a1">fixed示例：此段元素相对于浏览器窗口，距离顶部10px，距离左边10px;</p>
<p class="a2">fixed示例：此段元素相对于浏览器窗口，距离顶部50px，距离右边50px;</p>
</body>
</html>

Nach dem Login kopieren

Der Codeeffekt ist wie folgt:

Was bedeutet Position in CSS? Was sind seine Werte und Funktionen? (Zusammenfassen)

3. relativ

Erzeugt ein relativ positioniertes Element, das relativ zu seiner normalen Position positioniert ist. Daher fügt „left:20“ 20 Pixel zur LINKEN Position des Elements hinzu.

Beispiel für die Codeverwendung:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>relative</title>
<head>
    <style>
        h3.le
        {
            position:relative;
            left:-30px
        }
        h3.ri
        {
            position:relative;
            left:40px
        }
 </style>
</head>
<body>
<h3>正常位置的元素</h3>
<h3 class="le">这个元素相对于其正常位置向左移动</h3>
<h3 class="ri">这个元素相对于其正常位置向右移动</h3>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>本例中"left:-30px"，从元素的原始左侧位置减去 30 像素。</p>
<p>本例中"left:40px"，向元素的原始左侧位置增加 40 像素。</p>

</body>
</html>

Nach dem Login kopieren

Der Effekt ist wie folgt:

Was bedeutet Position in CSS? Was sind seine Werte und Funktionen? (Zusammenfassen)

4. statisch

Standardwert. Ohne Positionierung erscheint das Element im normalen Fluss (ohne Berücksichtigung der Top-, Bottom-, Left-, Right- oder Z-Index-Deklarationen).

5. inherit

gibt an, dass der Wert des Positionsattributs vom übergeordneten Element geerbt werden soll.

Dieser Artikel ist eine Zusammenfassung des relevanten Wissens über das Positionsattribut in CSS. Ich hoffe, dass er für Freunde in Not hilfreich sein wird.

Wenn Sie mehr über Front-End-bezogenes Wissen erfahren möchten, können Sie der chinesischen PHP-Website

CSS-Video-Tutorial, Bootstrap-Tutorial und anderen verwandten Front-Ends folgen Tutorials Jeder ist herzlich willkommen, es zu lernen und darauf zurückzugreifen!

Das obige ist der detaillierte Inhalt vonWas bedeutet Position in CSS? Was sind seine Werte und Funktionen? (Zusammenfassen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!