cssを使ってページの上部または下部にdivを固定する具体的な方法を解説-CSSチュートリアル-php.cn

cssを使ってページの上部または下部にdivを固定する具体的な方法を解説

藏色散人

リリース： 2018-09-04 10:54:48

オリジナル

22895 人が閲覧しました

Web インターフェイスをレイアウトしているときに、時々新しいニーズが生成され、達成したいニーズに基づいて新しい問題が発生します。あなたが上級の経験と能力を持つフロントエンド開発者であれば、単純なフロントエンドページのデザインによって引き起こされる問題は問題にはなりません。しかし、初心者の場合は少し難しいかもしれません。たとえば、ページのトップページまたはページの下部にある特定の div を固定する効果を CSS を使用して実現する必要があります。

この記事では、cssスタイルを使ってdivを上部に固定したり、divを下部に固定する設定方法を詳しく紹介します。

具体的なコード例で詳しく紹介しましょう

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

ログイン後にコピー

上記のコードはブラウザからアクセスされ、その結果は次のようになります:

cssを使ってページの上部または下部にdivを固定する具体的な方法を解説

スクリーンショットを見ると、2つの div ブロックが表示されていることがわかります。ページの上部と下部にあります。モバイルスクロールバーを使用してローカルで閲覧しています。どちらの div もまだ修正されています。ここでは、重要な CSS スタイル属性、position:fixed;、つまり絶対位置の style 属性に注意する必要があります。 Position 属性を使用すると、要素を静的、相対、絶対、または固定位置に配置できます。ここで使用するのは固定スタイル、つまり固定位置です。

つまり、ページ上の特定の位置（ブラウザウィンドウに対して）に固定された特定の div を実現したい場合、スクロールバーによって変更されません。位置固定属性を使いこなして、top:0、bottom:0と組み合わせて使用する必要があります。

以上はCSSでページの上部または下部のdivを固定する具体的な実装方法についてでしたが、一定の参考になるので、困っている友人の参考になれば幸いです。

以上がcssを使ってページの上部または下部にdivを固定する具体的な方法を解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。