2011-09-27 17 views
35

CSSを使ってブラウザ画面に「固定」HTMLオブジェクトを作成するというトリックを探しています。ユーザーが文書をスクロールしても、常に同じ位置にとどまりたい。私はこれのために適切な用語が何であるか分かりません。要素を画面上の「固定」位置に保つためのCSS

Facebookのチャットボタンや、一部のウェブサイトにあるフィードバックボタンのようなものです。

私の状況では、常に画面の絶対右下にdivを保持したいと考えています。サンプルCSSは高く評価しました。

答えて

38

あなたはIE6と多くのモバイル機器を除いてどこでも作品

position: fixed.

を探していてもよいです。

+1

しかし、あなたはそれのためのjQueryを使用してみましたか? –

+1

@MichaelJCalkins私は持っていて、それは最高でした! –

+5

http://needsmorejquery.com/ – kramer65

1

position: fixed;

これを実現するだろう。

position:absolute;のように扱いますが、ユーザーがコンテンツをスクロールするときにウィンドウとともにスクロールします。

0

あなたはこのようにそれを行うことができます。画面の上部に固定されます

#mydiv { 
    position: fixed; 
    height: 30px; 
    top: 0; 
    left: 0; 
    width: 100%; 
} 

これはdiv要素を作成します。 - fixed

3

微調整(固定、その位置は/バグがあり、IOSとAndroidのブラウザでは動作しませんのでご注意) :

position:fixed; 

作品しかしこれは特定のオプションを壊しています....たとえば、固定位置にタグ付けされたスクロール可能なメニューは、ブラウザウィンドウではもう展開されません...上に何かをピン止めする/別の方法があることを望みます/

0

この方法を試してください。

p.pos_fixed 
{ 
position:fixed; 
top:30px; 
right:5px; 
} 
8

コンテンツがdiv要素に保管されていることを確認し、divfixを言います。

<div id="divfix">Your Code goes here</div> 

のCss:

#divfix { 
     bottom: 0; 
     right: 0; 
     position: fixed; 
     z-index: 3000; 
     } 

希望、それはあなたを助けます...

0

HTML

<div id="fixedbtn"><button type="button" value="Delete"></button></div> 

CSS

#fixedbtn{ 
position: fixed; 
margin: 0px 10px 0px 10px; 
width: 10%; 
} 
1

ブラウザのズームを変更する場合、画像の上に同じ場所で浮動テキストを保つために、私はこのCSSを使用:

position: absolute; 
margin-top: -18% 

I薄いk固定ピクセルではなく%がそれです。乾杯!

関連する問題