Heim  >  Artikel  >  Web-Frontend  >  So erreichen Sie eine unveränderte Position des CSS-Positionierungsbilds

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

藏色散人
藏色散人Original
2020-12-15 10:29:253317Durchsuche

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>

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!

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