Heim > Artikel > Web-Frontend > Detaillierte Erläuterung des Positionsattributs in CSS

Detaillierte Erläuterung des Positionsattributs in CSS

怪我咯Original: 2017-06-22 09:16:171917Durchsuche

CSS dient das Attribut position dazu, den Positionierungstyp des Elements festzulegen. Es umfasst absolute (absolute Positionierung) und relative (relative Positionierung). , Es gibt vier Parameter: statisch ( statische Positionierung, Standardwert) und fest (feste Positionierung).

statisch: Standard. Ein Element, dessen Position auf „statisch“ gesetzt ist, befindet sich immer an der durch den Seitenfluss angegebenen Position (statische Elemente ignorieren alle Top-,
bottom-, left- oder right-Deklarationen).
relativ: Ein Element, dessen Position auf „relativ“ eingestellt ist, kann relativ zu seiner normalen Position verschoben werden, daher verschiebt „links:20“ das Element auf Die Position beträgt 20 Pixel links von der Normalposition.
absolut: Ein Element, dessen Position auf „absolut“ festgelegt ist, kann an angegebenen Koordinaten relativ zu dem Element positioniert werden, das es enthält. Die Position dieses Elements kann über die Attribute „left“, „top“, „right“ und „bottom“ angegeben werden.
fest: Elemente, deren Position auf fest eingestellt ist, können an angegebenen Koordinaten relativ zum Browserfenster positioniert werden. Die Position dieses Elements kann über die Attribute „left“, „top“, „right“ und „bottom“ angegeben werden. Das Element bleibt an dieser Position, unabhängig davon, ob das Fenster gescrollt wird oder nicht. Funktioniert im IE7 (strenger Modus).

Beispiel

Verwenden Sie das Positionsattribut, um das c1a436a314ed609750bd7c7d319db4da-Element zu positionieren. Der Code lautet wie folgt

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<style>
h2
{
	position:absolute;
	left:100px;
	top:150px;
}
</style>
</head>

<body>
<h2>这是一个绝对定位了的标题</h2>
<p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.</p>
</body>

</html>

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Positionsattributs in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：CSS-Stile – Wie lösche ich Element-Floats?Nächster Artikel：CSS-Stile – Wie lösche ich Element-Floats?

In Verbindung stehende Artikel

Mehr sehen