CSSを使ってブラウザ画面に「固定」HTMLオブジェクトを作成するというトリックを探しています。ユーザーが文書をスクロールしても、常に同じ位置にとどまりたい。私はこれのために適切な用語が何であるか分かりません。要素を画面上の「固定」位置に保つためのCSS
Facebookのチャットボタンや、一部のウェブサイトにあるフィードバックボタンのようなものです。
私の状況では、常に画面の絶対右下にdivを保持したいと考えています。サンプルCSSは高く評価しました。
CSSを使ってブラウザ画面に「固定」HTMLオブジェクトを作成するというトリックを探しています。ユーザーが文書をスクロールしても、常に同じ位置にとどまりたい。私はこれのために適切な用語が何であるか分かりません。要素を画面上の「固定」位置に保つためのCSS
Facebookのチャットボタンや、一部のウェブサイトにあるフィードバックボタンのようなものです。
私の状況では、常に画面の絶対右下にdivを保持したいと考えています。サンプルCSSは高く評価しました。
あなたはIE6と多くのモバイル機器を除いてどこでも作品
を探していてもよいです。position: fixed;
これを実現するだろう。
position:absolute;
のように扱いますが、ユーザーがコンテンツをスクロールするときにウィンドウとともにスクロールします。
あなたはこのようにそれを行うことができます。画面の上部に固定されます
#mydiv {
position: fixed;
height: 30px;
top: 0;
left: 0;
width: 100%;
}
これはdiv要素を作成します。 - fixed
最も簡単な方法は、position: fixed
を使用することです:
.element {
position: fixed;
bottom: 0;
right: 0;
}
+1はiOSとAndroidに関するメモです。 –
微調整(固定、その位置は/バグがあり、IOSとAndroidのブラウザでは動作しませんのでご注意) :
position:fixed;
作品しかしこれは特定のオプションを壊しています....たとえば、固定位置にタグ付けされたスクロール可能なメニューは、ブラウザウィンドウではもう展開されません...上に何かをピン止めする/別の方法があることを望みます/
この方法を試してください。
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
コンテンツがdiv要素に保管されていることを確認し、divfixを言います。
<div id="divfix">Your Code goes here</div>
のCss:
#divfix {
bottom: 0;
right: 0;
position: fixed;
z-index: 3000;
}
希望、それはあなたを助けます...
HTML
<div id="fixedbtn"><button type="button" value="Delete"></button></div>
CSS
#fixedbtn{
position: fixed;
margin: 0px 10px 0px 10px;
width: 10%;
}
ブラウザのズームを変更する場合、画像の上に同じ場所で浮動テキストを保つために、私はこのCSSを使用:
position: absolute;
margin-top: -18%
I薄いk固定ピクセルではなく%がそれです。乾杯!
position: sticky;
スクロール位置に達すると、スティッキー要素がページの上に(上:0)貼り付けられます。
は、例を参照してください: https://www.w3schools.com/css/tryit.asp?filename=trycss_position_sticky
しかし、あなたはそれのためのjQueryを使用してみましたか? –
@MichaelJCalkins私は持っていて、それは最高でした! –
http://needsmorejquery.com/ – kramer65