Detaillierte Erläuterung des Positionsattributs in CSS-CSS-Tutorial-php.cn

Detaillierte Erläuterung des Positionsattributs in CSS

怪我咯

Freigeben： 2017-06-22 09:16:17

Original

1956 Leute haben es durchsucht

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

-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>

Nach dem Login kopieren

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!