8

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

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

10 に答える 10

11

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

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

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

于 2010-01-27T23:19:59.540 に答える
4 
.tooltip {
 width: 200px;
 position: fixed;
 bottom:0px;
 right:0px;
}
于 2019-08-29T09:09:40.563 に答える
2

ええと、動作するはずです。多分削除しtop: autoますか？

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

于 2010-01-27T23:21:23.437 に答える
2

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

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

于 2010-01-27T23:23:08.160 に答える
1

あなたの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">
于 2010-01-27T23:24:39.280 に答える
1

はい、2つの面倒を見る必要があります

  • DOCTYPEを記述しますが、過渡的なものです！
  • 「position：fixed」のCSSプロパティはIE6でサポートされていません...したがって、「position：absolute」を使用することをお勧めします...他のすべてのプロパティは同じままです。
于 2011-10-06T20:04:27.193 に答える
1

すべての回答に「ビッグコード」が含まれている理由このように、div要素に「fixed」を追加しないのはなぜですか。

div position: fixed;

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

于 2013-01-08T17:54:53.577 に答える
1 
<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>
于 2015-02-18T05:11:02.670 に答える
1

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

http://learnlayout.com/position.html

修理済み

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

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

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

相対的

いくつかのプロパティを追加しない限り、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;
}
于 2015-02-18T05:16:05.760 に答える
1

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

<style>
    #myheader{
        position: fixed;
        left: 0px;
        top: 95vh;
        height: 5vh;
    }
</style>
<body>
    <div class="header" id = "myheader">
</body>
于 2019-03-09T07:35:47.550 に答える