Heim >Web-Frontend >Front-End-Fragen und Antworten >So reparieren Sie CSS3-Elemente ohne Scrollen
So reparieren Sie CSS3-Elemente ohne Scrollen
- WBOYOriginal
- 2022-08-29 16:46:341266Durchsuche
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;}“.
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>Ausgabeergebnis:
(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!