Maison > Article > interface Web > Explication de la méthode spécifique de correction des div en haut ou en bas de la page à l'aide de CSS

Explication de la méthode spécifique de correction des div en haut ou en bas de la page à l'aide de CSS

藏色散人original: 2018-09-04 10:54:4822846parcourir

Lorsque nous concevons l'interface Web, nous générerons occasionnellement de nouveaux besoins de temps en temps, puis de nouveaux problèmes surgiront en fonction des besoins que nous souhaitons satisfaire. Si vous êtes un développeur front-end possédant une expérience et des capacités supérieures, les problèmes causés par une simple conception de page front-end ne devraient pas poser de problème. Mais si vous êtes débutant, cela peut être un peu difficile. Par exemple, nous devons obtenir l'effet de corriger un certain div en haut ou en bas de la page sur la page d'accueil de la page. Comment y parvenir en utilisant CSS ?

Cet article vous donnera une introduction détaillée sur la façon d'utiliser le style CSS pour corriger le div en haut, ou définir le div pour qu'il soit corrigé en bas.

Ci-dessous, nous présentons en détail des exemples de code spécifiques

<!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>

Le code ci-dessus est accessible via le navigateur et l'effet est le suivant :

Explication de la méthode spécifique de correction des div en haut ou en bas de la page à laide de CSS

Grâce à la capture d'écran, nous pouvons voir qu'il y a deux blocs div affichés en haut et en bas de la page. Je navigue localement avec des barres de défilement mobiles. Les deux divs sont toujours corrigés. Ici, vous devez faire attention à un attribut de style CSS important, position:fixed ; c'est-à-dire l'attribut de style du positionnement absolu. L'attribut position permet de placer l'élément dans une position statique, relative, absolue ou fixe. Ce que nous utilisons ici est le style fixe, qui est une position fixe.

Donc, si nous voulons faire en sorte qu'un certain div soit fixé à une certaine position sur la page (par rapport à la fenêtre du navigateur) et ne change pas avec la barre de défilement. Il est nécessaire de maîtriser l'attribut position fixe et de l'utiliser en combinaison avec top:0 et bottom:0.

Ce qui précède concerne la méthode d'implémentation spécifique pour corriger les div en haut ou en bas de la page à l'aide de CSS. Il a une certaine valeur de référence et j'espère que cela sera utile aux amis dans le besoin.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

css position

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment implémenter un flux en cascade en utilisant du CSS pur ? Deux façons d'implémenter le flux en cascade en CSSArticle suivant：Comment implémenter un flux en cascade en utilisant du CSS pur ? Deux façons d'implémenter le flux en cascade en CSS

Articles Liés

Voir plus