Heim  >  Artikel  >  Web-Frontend  >  Implementieren Sie den Floating-Layer-Effekt unter CSS

Implementieren Sie den Floating-Layer-Effekt unter CSS

高洛峰
高洛峰Original
2016-11-24 14:29:412732Durchsuche

Definition und Verwendung

Das Positionsattribut gibt den Positionierungstyp des Elements an.

Beschreibung

Dieses Attribut definiert den Positionierungsmechanismus, der zum Festlegen des Layouts des Elements verwendet wird. Jedes Element kann positioniert werden, aber absolute oder feste Elemente erzeugen eine Box auf Blockebene, unabhängig vom Typ des Elements selbst. Ein relativ positioniertes Element wird im normalen Fluss von seiner Standardposition versetzt.

Standard:

statisch

Vererbung:

nein

Version:

CSS2

JavaScript-Syntax:

object.style.position="absolute"

Instanz

Positionierung des h2-Elements:

h2
{position:absolute ;left :100px;
top:150px;
}

TIY

Browser-Unterstützung

Alle gängigen Browser unterstützen das Positionsattribut.

Hinweis: Der Attributwert „inherit“ wird in keiner Version von Internet Explorer (einschließlich IE8) unterstützt.

Mögliche Werte

Wert

Beschreibung

absolut

Absolut positioniert generieren Elemente werden im Gegensatz zur statischen Positionierung relativ zum ersten übergeordneten Element positioniert. Die Position des

-Elements wird durch die Attribute „left“, „top“, „right“ und „bottom“ angegeben.

fest

Erzeugt ein absolut positioniertes Element, positioniert relativ zum Browserfenster. Die Position des

-Elements wird durch die Attribute „left“, „top“, „right“ und „bottom“ angegeben.

relative

Erzeugt ein relativ positioniertes Element, das relativ zu seiner normalen Position positioniert ist.

Also fügt „left:20“ 20 Pixel zur LINKEN Position des Elements hinzu.

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

inherit

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

erben Implementieren Sie den Floating-Layer-Effekt unter CSS


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