So reparieren Sie CSS3-Elemente ohne Scrollen-Front-End-Fragen und Antworten-php.cn

So reparieren Sie CSS3-Elemente ohne Scrollen

WBOY

Freigeben： 2022-08-29 16:46:34

Original

1272 Leute haben es durchsucht

In CSS3 können Sie das Positionsattribut verwenden, um das Element ohne Scrollen zu fixieren. Dieses Attribut wird verwendet, um den Positionierungstyp des Elements anzugeben. Wenn der Wert des Attributs auf „fest“ gesetzt ist, ist die Position des Elements relativ fixiert Zum Browserfenster, das ohne Scrollen erreicht werden kann, lautet die Syntax „element {position:fixed;}“.

So reparieren Sie CSS3-Elemente ohne Scrollen

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.

So korrigieren Sie CSS3-Elemente ohne Scrollen

In CSS können Sie das Positionspositionierungsattribut verwenden, um die Position des Div auf der Seite festzulegen

Das Positionsattribut gibt den Positionierungstyp des Elements an.

Elemente können mit den Attributen oben, unten, links und rechts positioniert werden. Diese Eigenschaften funktionieren jedoch nur, wenn zuerst die Positionseigenschaft festgelegt wird. Sie funktionieren auch je nach Positionierungsmethode unterschiedlich.

feste Positionierung

Die Position des Elements ist relativ zum Browserfenster festgelegt.

Feste Positionierung, Positionierung relativ zur Erstellung des Browsers. Sie können die vier Attribute oben, rechts, unten und links verwenden, um die Position des Elements relativ zum Browserfenster zu definieren. Bei Verwendung von Elementen mit fester Positionierung bleibt die Position des Elements fest, unabhängig davon, wie Sie im Browserfenster scrollen.

Das Beispiel sieht wie folgt aus:

<html>
<head>
<style type="text/css">
div{
position:fixed;
left:5px;
top:5px;
width:50px;
height:50px;
background-color:red;
}
</style>
</head>
<body>
    <div></div>
<br/>
<br/><br/><br/><br/><br/><br/><br/><br/><bbr/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><brr/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>sergsergsgs<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></><br/><br/>
</body>
</html>

Nach dem Login kopieren

Ausgabeergebnis:

So reparieren Sie CSS3-Elemente ohne Scrollen

(Freigabe von Lernvideos: CSS-Video-Tutorial, HTML-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo reparieren Sie CSS3-Elemente ohne Scrollen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!