So erreichen Sie eine unveränderte Position des CSS-Positionierungsbilds-CSS-Tutorial-php.cn

So erreichen Sie eine unveränderte Position des CSS-Positionierungsbilds

藏色散人

Freigeben： 2023-01-04 09:37:26

Original

3400 Leute haben es durchsucht

So implementieren Sie die Position des CSS-Positionierungsbildes unverändert: Erstellen Sie zunächst eine HTML-Beispieldatei. Fügen Sie dann dem Bild den Stil „Position: Fest“ hinzu, um die Bildposition festzulegen und sie unverändert zu lassen.

So erreichen Sie eine unveränderte Position des CSS-Positionierungsbilds

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3-Version, Thinkpad T480-Computer.

Empfohlen: „CSS-Video-Tutorial“

In CSS können Sie die feste Positionierung (Position: fest) verwenden, um das Bild so zu positionieren, dass die Bildposition unverändert bleibt, sodass sich die Bildposition beim Ziehen des Bildes nicht ändern kann Text.

Position: Fixed wird verwendet, um Elemente mit fester Position zu generieren, die relativ zum Browserfenster positioniert sind. Die Position des Elements wird durch die Attribute „left“, „top“, „right“ und „bottom“ angegeben.

fixed generiert Elemente mit fester Positionierung, die vom Dokumentfluss getrennt sind und nicht die Position des Dokumentflusses einnehmen. Sie können als schwebend über dem Dokumentfluss verstanden werden und relativ zum Browserfenster positioniert werden.

Feste Positionierung (Position: fest): Das Element wird relativ zum Browserfenster positioniert. Unabhängig davon, wie Sie Ihren Schieberegler bewegen, wird es an einer festen Position relativ zum Browserfenster fixiert unabhängig von seiner Anwesenheit positioniert werden. Die derzeit verwendeten Werte oben, unten, links und rechts beziehen sich ebenfalls auf das Browserfenster.

Beispiel:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
.logo {
width: 540px;
height: 258px;
position: fixed;
background: url(https://www.baidu.com/img/bdlogo.png) no-repeat;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="logo"> </div>
111<br/> 111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>
</body>
</html>

Nach dem Login kopieren

Rendering:

So erreichen Sie eine unveränderte Position des CSS-Positionierungsbilds

Erklärung:

Wie aus dem obigen Beispiel ersichtlich ist: Sie können Position: Fixed verwenden, um die Position des Bildes zu fixieren, sodass die Position des Bildes nicht geändert wird ändert sich, wenn der Text gezogen wird.

Das obige ist der detaillierte Inhalt vonSo erreichen Sie eine unveränderte Position des CSS-Positionierungsbilds. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!