Positionierungsprobleme in CSS: absolute Positionierung, relative Positionierung, fest und statisch-CSS-Tutorial-php.cn

Positionierungsprobleme in CSS: absolute Positionierung, relative Positionierung, fest und statisch

不言

Freigeben： 2018-08-10 11:32:00

Original

2363 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit Positionierungsproblemen in CSS: absolute Positionierung, feste und statische Positionierung. Ich hoffe, dass er für Sie hilfreich ist.

1. Absolute Positionierung (absolut): Positionierung weg von der ursprünglichen Position , Sie können links rechts oben unten für die Positionierung verwenden

HTML-Code

<!DOCTYPE html>
<html lang="en">
<head>
	<meter charset="utf-8">
	<title>hhhh</title> 
	<link rel="stylesheet" type="text/css" href="lesson3.css">
</head>
<body>
	<p class="demo"></p>
	<p class="box"></p>
</body>
</html>

Nach dem Login kopieren

CSS-Code:

*{
	margin:0;
	padding:0;
}
.demo{
	position:absolute; 
	/*top:100px;
	left:100px;*/
	width: 100px;
	height: 100px;
	background-color: red;
	opacity: 0.5;     /*透明度*/
}
.box{
	width:150px;
	height:150px;
	background-color: green;
}

Nach dem Login kopieren

Der Effekt, wenn die Positionierung nicht verwendet wird (das p-Element ist ein Element auf Blockebene und belegt eine exklusive Zeile)

Plus Positionierung, der Effekt, wenn oben links nicht eingestellt ist (zu diesem Zeitpunkt befinden sich Demo und Box nicht auf derselben Ebene)

Oben hinzufügen Linker Effekt

2. Relative Positionierung (relativ): Behalten Sie die ursprüngliche Position für die Positionierung bei, Sie können links rechts oben verwenden unten für die Positionierung

HTML-Code:

<!DOCTYPE html>
<html lang="en">
<head>
	<meter charset="utf-8">
	<title>hhhh</title> 
	<link rel="stylesheet" type="text/css" href="lesson3.css">
</head>
<body>
	<p class="demo"></p>
	<p class="box"></p>
</body>
</html>

Nach dem Login kopieren

CSS-Code

*{
	margin:0;
	padding:0;
}
.demo{
	position:relative; 
	/*top:100px;
	left:100px;*/
	width: 100px;
	height: 100px;
	background-color: red;
	opacity: 0.5;     /*透明度*/
}
.box{
	width:150px;
	height:150px;
	background-color: green;
}

Nach dem Login kopieren

Wenn die Positionspositionierung nicht verwendet wird

Wann Die Oppositionspositionierung wird ohne oben links verwendet

Bei Verwendung der Opportunitätspositionierung plus oben links (behalten Sie die ursprüngliche Position von Rot für die Positionierung bei und lassen Sie den ursprünglichen roten Teil oben)

3.fixiert: Um das Element relativ zum Browserfenster zu positionieren, können Sie zur Positionierung links rechts oben unten

verwenden 4.statisch: Standardwerte, keine Positionierung, oben links usw. funktionieren nicht

Hinweis: Wenn vorhanden Eltern-Kind-Elemente mit Positionierung

Absolut: Position relativ zum nächstgelegenen übergeordneten Element. Wenn nicht, positionieren Sie relativ zum Dokument
Relativ: Position relativ zu seine ursprüngliche Position

Normalerweise verwenden wir relative als Referenzobjekt und absolute für die Positionierung

Zum Beispiel:

<div class="wrapper">
    <div class="demo">    
        <div class="box"></div>
    </div>
</div>

Nach dem Login kopieren

Wenn das Feld so gestaltet ist, dass es auf die Demo verweist, ist die Positionierung

*{
	margin:0;
	padding:0;
}

.wrapper{
	margin-left: 100px;
	width: 200px;
	height: 200px;
	background-color: orange;
}
.demo{
	position:relative; 
	margin-left: 100px;
	width: 100px;
	height: 100px;
	background-color: red;
	
}
.box{
	position:absolute;
	left: 50px;
	width:50px;
	height:50px;
	background-color: green;
}

Nach dem Login kopieren

Verwandte Empfehlungen:

Neue HTML5-Attribute: So verwenden Sie das classList-Attribut

Was ist CSS-Übergang? Eine kurze Einführung in Übergangselemente in CSS

Wie kann man mit reinem CSS-Code dafür sorgen, dass Text einen blinkenden Effekt anzeigt? (Codebeispiel)

Das obige ist der detaillierte Inhalt vonPositionierungsprobleme in CSS: absolute Positionierung, relative Positionierung, fest und statisch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

PHP8, ich komme auch

Lernen Sie das Website-Layout in 30 Minuten

Shangguan Oracle Video-Tutorial für Anfänger bis Fortgeschrittene

Ihre erste Zeile UNI-APP-Code

Flattern Sie von Grund auf bis zum App-Start

Brother Lian Neues Linux-Video-Tutorial

AXURE 9 Video-Tutorial (geeignet für die interaktive Produktdesign-Benutzeroberfläche von Product Manager)

Zero Basic Proficiency PS-Video-Tutorial

16-tägiges UI-Video-Tutorial für den Einstieg

PS-Techniken und Slicing-Techniken-Video-Tutorial

Video-Tutorial zum Bau und zur Projekteinführung der Alibaba Cloud-Umgebung

Überblick über Computernetzwerke – Grundkenntnisse, die Programmierer beherrschen müssen

Grundlegendes Tutorial für Programmierer – Erklärung des HTTP-Protokolls

Websocket-Video-Tutorial

Positionierungsprobleme in CSS: absolute Positionierung, relative Positionierung, fest und statisch

Hinweis: Wenn vorhanden Eltern-Kind-Elemente mit Positionierung

Absolut: Position relativ zum nächstgelegenen übergeordneten Element. Wenn nicht, positionieren Sie relativ zum Dokument
Relativ: Position relativ zu seine ursprüngliche Position

Normalerweise verwenden wir relative als Referenzobjekt und absolute für die Positionierung

Zum Beispiel:

Wenn das Feld so gestaltet ist, dass es auf die Demo verweist, ist die Positionierung

Positionierungsprobleme in CSS: absolute Positionierung, relative Positionierung, fest und statisch

Hinweis: Wenn vorhanden Eltern-Kind-Elemente mit Positionierung

Absolut: Position relativ zum nächstgelegenen übergeordneten Element. Wenn nicht, positionieren Sie relativ zum Dokument Relativ: Position relativ zu seine ursprüngliche Position

Normalerweise verwenden wir relative als Referenzobjekt und absolute für die Positionierung

Zum Beispiel:

Wenn das Feld so gestaltet ist, dass es auf die Demo verweist, ist die Positionierung

Absolut: Position relativ zum nächstgelegenen übergeordneten Element. Wenn nicht, positionieren Sie relativ zum Dokument
Relativ: Position relativ zu seine ursprüngliche Position