Heim >Web-Frontend >HTML-Tutorial >So legen Sie die Textposition in HTML fest
So legen Sie die Textposition in HTML fest
- 青灯夜游Original
- 2021-05-20 12:56:5653548Durchsuche
So legen Sie die Textposition in HTML fest: Verwenden Sie zuerst das Positionsattribut, um den Positionierungstyp des Textelements festzulegen (absolute Positionierung oder feste Positionierung); verwenden Sie dann die Attribute oben, unten, links und rechts, um den Versatzwert festzulegen das Textelement und legen Sie dann die Position des Textelements fest.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
So legen Sie die Textposition in HTML fest:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
p#p1{
position: absolute;
top: 20px;
left: 20px;
}
p#p2{
position: absolute;
bottom: 0px;
right: 20px;
}
</style>
</head>
<body>
<img src="img/1.jpg" style="max-width:90%" / alt="So legen Sie die Textposition in HTML fest" >
<p id="p1">测试文本！测试文本！</p>
<p id="p2">测试文本！测试文本！</p>
</body>
</html>Rendering:
Beschreibung:
Das Positionsattribut gibt den Positionierungstyp des Elements an.
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.
| Wert | Beschreibung |
|---|---|
| absolute |
Erzeugt ein absolut positioniertes Element, das relativ zum ersten übergeordneten Element positioniert ist, anders als die statische Positionierung. Die Position des Elements wird durch die Attribute „links“, „oben“, „rechts“ und „unten“ angegeben. |
| fixed |
Erzeugt absolut positionierte Elemente, positioniert relativ zum Browserfenster. Die Position des Elements wird durch die Attribute „links“, „oben“, „rechts“ und „unten“ angegeben. |
| relative |
Erzeugt ein relativ positioniertes Element, das relativ zu seiner normalen Position positioniert ist. Mit „left:20“ werden also 20 Pixel zur LINKEN Position des Elements hinzugefügt. |
| statisch | Standardwert. Ohne Positionierung erscheint das Element im normalen Fluss (oben, unten, links, rechts oder Z-Index-Deklarationen werden ignoriert). Das |
top-Attribut gibt die Oberkante des Elements an. Diese Eigenschaft definiert den Versatz zwischen der oberen Randgrenze eines positionierten Elements und der oberen Grenze seines enthaltenden Blocks.
Bei relativen Definitionselementen sind ihre berechneten Werte beide 0, wenn einer von ihnen automatisch ist Gegenteil des Wertes. Das
bottom-Attribut gibt den unteren Rand des Elements an. Diese Eigenschaft definiert den Versatz zwischen der unteren Randgrenze des positionierten Elements und der unteren Grenze seines enthaltenden Blocks.
Für absolut positionierte Elemente legt das untere Attribut die Einheit über/unter der Unterkante des Elements fest, das es enthält. Bei relativ positionierten Elementen legt das Attribut „bottom“ die Unterkante des Elements in Einheiten über/unter seiner normalen Position fest. Das Attribut
left gibt den linken Rand des Elements an. Diese Eigenschaft definiert den Versatz zwischen der linken Randkante des positionierten Elements und der linken Kante des enthaltenden Blocks. Das Attribut
right gibt den rechten Rand des Elements an. Diese Eigenschaft definiert den Versatz zwischen der rechten Randkante des positionierten Elements und der rechten Kante des enthaltenden Blocks.
Für statische Elemente ist es automatisch; für Längenwerte ist es die entsprechende absolute Länge; andernfalls ist es automatisch. Bei relativ definierten Elementen wird links immer nach rechts ausgewertet.
Empfohlene Tutorials: HTML-Video-Tutorial, CSS-Video-Tutorial
Das obige ist der detaillierte Inhalt vonSo legen Sie die Textposition in HTML fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!