Heim > Artikel > Web-Frontend > Erläuterung der spezifischen Methode zum Fixieren von div oben oder unten auf der Seite mithilfe von CSS

Erläuterung der spezifischen Methode zum Fixieren von div oben oder unten auf der Seite mithilfe von CSS

藏色散人Original: 2018-09-04 10:54:4822855Durchsuche

Wenn wir die Weboberfläche gestalten, generieren wir von Zeit zu Zeit neue Bedürfnisse, und dann entstehen neue Probleme basierend auf den Bedürfnissen, die wir erreichen möchten. Wenn Sie ein Front-End-Entwickler mit langjähriger Erfahrung und Fähigkeiten sind, sollten die Probleme, die durch das einfache Front-End-Seitendesign verursacht werden, kein Problem darstellen. Aber wenn Sie ein Neuling sind, kann es etwas schwierig sein. Beispielsweise müssen wir den Effekt erzielen, dass ein bestimmtes Div oben oder unten auf der Startseite der Seite fixiert wird. Wie kann dies mithilfe von CSS erreicht werden?

Dieser Artikel gibt Ihnen eine detaillierte Einführung in die Verwendung des CSS-Stils, um das Div oben zu fixieren oder das Div so festzulegen, dass es unten fixiert wird.

Lassen Sie es uns anhand spezifischer Codebeispiele im Detail vorstellen

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css固定div示例</title>
    <style>
        .demo{
           margin-top: 100px;}
       .demo1{position: fixed;
           top: 10px; left:0px; bottom:0px; width:100%; height: 50px;background-color: #acffcb;z-index:999;}
        .demo2{ position:fixed; left:0px; bottom:0px;  width:100%; height: 50px; background-color: #4cedef; z-index:999;}
    </style>
</head>
<body>
<div class="demo">
    <p>此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！</p>
    <p>此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！</p>
    <p>此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！</p>
    <p>此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！</p>
    <p>此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！</p>
    <p>此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！</p>
    <p>此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！</p>
    <p>此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！</p>
    <p>此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！</p>
    <p>此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！</p>
</div>
<div class="demo1">固定在顶部</div>
<div class="demo2">固定在底部</div>
</body>
</html>

Auf den obigen Code wird über den Browser zugegriffen und der Effekt ist wie folgt:

Erläuterung der spezifischen Methode zum Fixieren von div oben oder unten auf der Seite mithilfe von CSS

Auf dem Screenshot können wir sehen, dass oben und unten auf der Seite zwei Div-Blöcke angezeigt werden. Ich surfe lokal mit mobilen Bildlaufleisten. Beide Divs sind noch behoben. Hier müssen Sie auf ein wichtiges CSS-Stilattribut achten: position:fixed; das Stilattribut der absoluten Positionierung. Das Positionsattribut ermöglicht die Platzierung des Elements an einer statischen, relativen, absoluten oder festen Position. Was wir hier verwenden, ist der feste Stil, also eine feste Position.

Wenn wir also erreichen wollen, dass ein bestimmtes Div an einer bestimmten Position auf der Seite (relativ zum Browserfenster) fixiert ist und sich nicht mit der Bildlaufleiste ändert. Es ist notwendig, das Attribut „Positionsfest“ zu beherrschen und es in Kombination mit „top:0“ und „bottom:0“ zu verwenden.

Oben geht es um die spezifische Implementierungsmethode zum Korrigieren von div oben oder unten auf der Seite mithilfe von CSS. Es hat einen gewissen Referenzwert und ich hoffe, dass es für Freunde in Not hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonErläuterung der spezifischen Methode zum Fixieren von div oben oder unten auf der Seite mithilfe von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css position

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

Vorheriger Artikel：Wie implementiert man einen Wasserfallfluss mit reinem CSS? Zwei Möglichkeiten, den Wasserfallfluss in CSS zu implementierenNächster Artikel：Wie implementiert man einen Wasserfallfluss mit reinem CSS? Zwei Möglichkeiten, den Wasserfallfluss in CSS zu implementieren

In Verbindung stehende Artikel

Mehr sehen