web-dev-qa-db-ja.com

固定divを作成する方法は？

ページの右下の境界に固定されるボックスを作成しようとしていますが、ページが下にスクロールしても移動しません。しかし、それは私にはうまくいきません。理由はわかりません。これが私のコードです：

<html>
 <head>

 <style type="text/css">

.tooltip {
 width: 200px;
 position: fixed;
 top:auto;
 bottom:0px;
 right:0px;
 left:auto;
}
 </style>
 </head> 
<body>
<div class="tooltip">
   <div class="tooltip_top">1</div>
   <div class="tooltip_con">2</div>
   <div class="tooltip_bot">3</div>
 </div>
</body>
</html>
csshtmlfixed
8
taabouzeid

FFとChrome ..で正常に動作します。

古いバージョンのIEはposition:fixedを正しくサポートしていませんでした..最新バージョンについてはわかりません。.

また、Doctypeが定義されていることを確認してください。

11
Gabriele Petrioli
.tooltip {
 width: 200px;
 position: fixed;
 bottom:0px;
 right:0px;
}
4
vamsidhar Reddy Eguvapalli

私のために働いているようです.... IE7以降では、Doctypeを定義する必要があります。どこから始めればよいかわからない場合は、「quirksmode」を検索してください。

IE6はposition：fixedをサポートしていないと思います。

2
dpb

ええと、動作するはずです。たぶんtop: autoを削除しますか？

（ただし、IE 6ではposition: fixedをサポートしていないため、IE 6では機能しません。

1
Paul D. Waite

このようなものが機能するはずです

<style>
    #myheader{
        position: fixed;
        left: 0px;
        top: 95vh;
        height: 5vh;
    }
</style>
<body>
    <div class="header" id = "myheader">
</body>
0
Erik Österling

すべての回答に「大きなコード」があることこのようにdiv要素に「fixed」を追加しないのはなぜですか。

div position: fixed;

そしてそれはそれです：Dそれがあなたのために働くことを願っています

0
user1959021

はい、注意すべき2つのこと

  • DOCTYPEを記述しますが、暫定的なものです。
  • 「position：fixed」のCSSプロパティはIE6ではサポートされていません...したがって、「position：absolute」を使用することをお勧めします...他のすべてのプロパティは同じままです。
0
Devanand
<html>
 <head>
 <style type="text/css">
.header {
 width: 100%;
 height:100px;
 position: fixed;
 top:0px;
 left:0px;
}
 </style>
 </head> 
<body>
<div class="tooltip">
   <div class="tooltip_top">1</div>
   <div class="tooltip_con">2</div>
   <div class="tooltip_bot">3</div>
 </div>
</body>
</html>
0
Ravi Chauhan

あなたのhtml/cssはIEでのみ壊れています。から変更する position: fixed;からposition: absolute;そしてそれはあなたが望むようにもっと働くはずです。

Doctype要素を適用することもできます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
0
Nick Larsen

位置に関連する問題があれば、このリンクを表示して、迅速な解決策を入手してください。

http://learnlayout.com/position.html

修正済み

固定要素はビューポートを基準にして配置されます。つまり、ページがスクロールされても常に同じ場所にとどまります。相対と同様に、top、right、bottom、およびleftプロパティが使用されます。

ページの右下隅にある固定要素に気付いたと思います。私はあなたに今それに注意を払う許可を与えています。これがそれをそこに置くCSSです：

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  background-color: white;
}

relative

いくつかのプロパティを追加しない限り、relativeはstaticと同じように動作します。

.relative1 {
  position: relative;
}
.relative2 {
  position: relative;
  top: -20px;
  left: 20px;
  background-color: white;
  width: 500px;
}

絶対

絶対値は最もトリッキーな位置の値です。絶対は、ビューポートに対してではなく、最も近い位置にある祖先に対して相対的であることを除いて、固定のように動作します。絶対配置された要素に配置された祖先がない場合、ドキュメントの本文を使用し、ページのスクロールに合わせて移動します。 「配置された」要素とは、静的以外の位置にある要素のことです。

簡単な例を次に示します。

.relative {
  position: relative;
  width: 600px;
  height: 400px;
}
.absolute {
  position: absolute;
  top: 120px;
  right: 0;
  width: 300px;
  height: 200px;
}
0
Ravi Chauhan