ホームページ > 記事 > ウェブフロントエンド > cssを使ってページの上部または下部にdivを固定する具体的な方法を解説
cssを使ってページの上部または下部にdivを固定する具体的な方法を解説
- 藏色散人オリジナル
- 2018-09-04 10:54:4822847ブラウズ
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>上記のコードはブラウザからアクセスされ、その結果は次のようになります:
スクリーンショットを見ると、2つの div ブロックが表示されていることがわかります。ページの上部と下部にあります。モバイルスクロールバーを使用してローカルで閲覧しています。どちらの div もまだ修正されています。ここでは、重要な CSS スタイル属性、position:fixed;、つまり絶対位置の style 属性に注意する必要があります。 Position 属性を使用すると、要素を静的、相対、絶対、または固定位置に配置できます。ここで使用するのは固定スタイル、つまり固定位置です。
つまり、ページ上の特定の位置（ブラウザウィンドウに対して）に固定された特定の div を実現したい場合、スクロールバーによって変更されません。位置固定属性を使いこなして、top:0、bottom:0と組み合わせて使用する必要があります。
以上はCSSでページの上部または下部のdivを固定する具体的な実装方法についてでしたが、一定の参考になるので、困っている友人の参考になれば幸いです。
以上がcssを使ってページの上部または下部にdivを固定する具体的な方法を解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。