Heim > Web-Frontend > CSS-Tutorial > Vertieftes Verständnis und Anwendung von Position

Vertieftes Verständnis und Anwendung von Position

高洛峰
Freigeben: 2016-11-04 16:14:13
Original
1217 Leute haben es durchsucht

Position wird allgemein als Positionierung bezeichnet.

Vertieftes Verständnis und Anwendung von Position

Position ist überhaupt nicht kompliziert, wenn sie verwechselt wird Die Hauptregeln lauten wie folgt:

Trennung aus dem Dokumentenfluss

Mit Ausnahme des statischen Attributwerts führen andere Werte dazu, dass das Element aus dem Dokumentenfluss austritt (Float). führt auch dazu, dass das Element aus dem Dokumentenfluss gerät.

Einfluss auf Breite und Höhe

1) Der absolute Referenzpunkt ist das nächstgelegene übergeordnete Element, das als Referenzpunkt (Element, dessen Position absolut, relativ, fest ist) und fester Referenzpunkt verwendet werden kann Durchsuchen Der Referenzpunkt des Browserfensters und relativ ist die normale Position des Elements.

2) Wenn der Wert des Elements selbst geerbt wird

a) Wenn die Breiten- und Höhenwerte des übergeordneten Elements numerische Werte sind, erbt das Element die volle Höhe des übergeordneten Elements Element und verwendet den nächstgelegenen Referenzpunkt, auf den verwiesen wird.

.wrap{
            position: relative;
            width: 500px;
            height: 300px;
            border: 1px solid red;
        }
        .cont{
            background: gray;
            width: 150px;
            overflow: hidden;
        }
        .txt{
            background: yellow;
            width: 230px;
            height: inherit;
        }
        .banner{
            background: pink;
            width: 50%;
            height: inherit;
        }
        .txt-cont{
            position: absolute;
            background: darkblue;
            width: inherit;
            color: white;
        }
Nach dem Login kopieren
<div class="wrap">
        <div class="cont">
            cont
            <div class="txt">
                txtxtxt
                <div class="txt-cont">
                    txt-cont
                </div>
            </div>
            <div class="banner">
                banner
            </div>
        </div>
</div>
Nach dem Login kopieren

Vertieftes Verständnis und Anwendung von Position

b) Wenn die Breiten- und Höhenwerte des übergeordneten Elements Prozentsätze sind, werden sie basierend auf der Breite und Höhe der Referenz berechnet Punktelement * Prozentsatz.

.wrap{
            position: relative;
            width: 500px;
            height: 300px;
            border: 1px solid red;
        }
        .cont{
            background: gray;
            width: 150px;
            overflow: hidden;
        }
        .txt{
            background: yellow;
            width: 50%;
            height: inherit;
        }
        .banner{
            background: pink;
            width: 50%;
            height: inherit;
        }
        .txt-cont{
            position: absolute;
            background: darkblue;
            width: inherit;
            color: white;
        }
Nach dem Login kopieren
<div class="wrap">
        <div class="cont">
            cont
            <div class="txt">
                txt
                <div class="txt-cont">
                    txt-cont
                </div>
            </div>
            <div class="banner">
                banner
            </div>
        </div>
</div>
Nach dem Login kopieren

Vertieftes Verständnis und Anwendung von Position

3) Wenn das Element selbst ein Prozentsatz (50 %) ist

In diesem Fall unabhängig von der Breite und Breite Ob es sich bei der Höhe um einen numerischen Wert oder einen Prozentsatz handelt, hat keinen Einfluss auf das Element selbst. Das Element selbst wird weiterhin entsprechend der Referenz berechnet.

.wrap{
            position: relative;
            width: 500px;
            height: 300px;
            border: 1px solid red;
        }
        .cont{
            background: gray;
            width: 150px;
            overflow: hidden;
        }
        .txt{
            background: yellow;
            width: 50%;
            height: inherit;
        }
        .banner{
            background: pink;
            width: 50%;
            height: inherit;
        }
        .txt-cont{
            position: absolute;
            background: darkblue;
            width: 100%;
            color: white;
        }
Nach dem Login kopieren
<div class="wrap">
        <div class="cont">
            cont
            <div class="txt">
                txt
                <div class="txt-cont">
                    txt-cont
                </div>
            </div>
            <div class="banner">
                banner
            </div>
        </div>
</div>
Nach dem Login kopieren

Vertieftes Verständnis und Anwendung von Position

Standardposition nach der Positionierung

Die Standardposition nach den Attributen „Fest“ und „Absolut“ sind beide vorhanden und werden nur unmittelbar nach dem Normaldokument gefaltet Strömungselemente werden auftauchen und von positionierten Elementen abgedeckt.

Es hat eine unlösbare Beziehung zum Z-Index

Die detaillierte Einführung von Z-Index finden Sie in den folgenden Kapiteln. Es wird hier nur darauf hingewiesen, dass die Position einen kaskadierenden Kontext erstellt für statische Werte (Z-Index ist keine automatische Zeit).

1) Wenn der Z-Index ein numerischer Wert ist, wird ein Stapelkontext erstellt und die Stapelreihenfolge der Unterelemente wird als Referenz verwendet.

2) Wenn der Z-Index automatisch ist, wird der Stapelkontext nicht erstellt und die Stapelreihenfolge stimmt mit Z-Index:0 überein.


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage