タグ付けされた質問 「css-position」

position:fixedページの中央に配置されたdivを取得しようとしています。 私は常にこの「ハック」を使用して絶対配置されたdivでそれを行うことができました left: 50%; width: 400px; margin-left:-200px ...ここでmargin-leftの値はdivの幅の半分です。 これは固定位置のdivでは機能しないようです。代わりに、左端のコーナーを50％にして配置し、margin-left宣言を無視します。 これを修正して固定位置の要素を中央揃えにできるようにするためのアイデアはありますか？ そして、私が上記で概説した方法よりも、絶対配置された要素を中央に配置するより良い方法を教えていただければ、ボーナスM＆Mを投入します。

126 html  center  alignment  css-position 

位置：スティッキーは一部のモバイルブラウザーで機能するようになりました。メニューバーをページと共にスクロールさせ、ユーザーがスクロールすると常にビューポートの上部に固定することができます。 しかし、現在「固定」されているときに、固定メニューバーを少しだけスタイル変更したい場合はどうでしょうか。たとえば、ページと一緒にスクロールするときはいつでもバーの角を丸くしたいかもしれませんが、バーがビューポートの上部にくっついたらすぐに、上部の丸い角を取り除き、その下に小さなドロップシャドウを追加しますそれ。 現在固着::stuckしている要素をターゲットにするための何らかの種類の疑似セレクター（など）はposition: sticky ありますか？または、ブラウザーベンダーはパイプラインでこのようなものを持っていますか？そうでない場合、どこでリクエストすればよいですか？ NB。モバイルでは通常scroll、ユーザーが指を離したときにイベントが1つしか取得されないため、JavaScriptソリューションは適していません。そのため、JSはスクロールのしきい値を超えた正確な瞬間を知ることができません。

109 css  css-selectors  css-position 

私はこれに少し立ち往生していて、これとposition: stickyフレックスボックスの落とし穴を共有したいと思いました： ビューをフレックスボックスコンテナに切り替えるまで、スティッキーdivは正常に機能していましたが、フレックスボックスの親にラップされたときに突然divがスティッキーではなくなりました。 .flexbox-wrapper { display: flex; height: 600px; } .regular { background-color: blue; } .sticky { position: -webkit-sticky; position: sticky; top: 0; background-color: red; } <div class="flexbox-wrapper"> <div class="regular"> This is the regular box </div> <div class="sticky"> This is the sticky box </div> </div> コードスニペットを実行する結果を非表示スニペットを展開 問題を示すJSFiddle

106 css  flexbox  css-position  sticky 

次のCSSを持つ要素があります。 .elem { left: 0; position: fixed; right: 0; width: 60%; z-index: 1000; } 要素は画面全体に広がりません。画面の右側に「整列」させたいのですが。 left：0を削除しただけなら簡単ですが、上記のCSSを改ざんできないため、left：0 CSS をオーバーライド、無効化、または削除するには、CSSまたはJqueryが必要です。 手伝ってくれてありがとう！

104 css  css-position 

いずれかは私に違い伝えることができますstyle = "position:absolute"し、style = "position:relative" そしてそれらがどのようにケースが異なる私はそれを追加div/ span/ input要素を？ absolute今使っていますが、調べrelativeてみたいです。これはどのようにポジショニングを変更しますか？

103 css  css-position 

私がしているdivに位置しfixed、メニューやナビゲーションリンクを含む、Webページの左側にあります。cssから設定された高さはなく、コンテンツによって高さが決まり、幅は固定されています。問題は、コンテンツが多すぎると、divウィンドウの高さよりも大きくなり、コンテンツの一部が表示されなくなることです。（位置があるので、ウィンドウをスクロールすると、ヘルプがないfixedし、divスクロールしません。） 設定してみました overflow-y:auto;が、それも役に立ちません。divは、その一部がウィンドウの外にあることに気付いていないようです。 divハングがウィンドウの外にぶら下がっている場合、必要な場合にのみコンテンツをスクロール可能にするにはどうすればよいですか？

94 html  css  css-position 

divを本文の任意の部分に挿入しposition: absolute、position: relative。を持つ親要素ではなく、ドキュメント全体を基準にしてdivを作成しようとしています。

93 html  css  css-position 

流動的なレイアウトで、サイドバーナビゲーションを常にスクロールに固定することは可能ですか？

92 css  twitter-bootstrap  css-position  fluid-layout 

これら2つの違いを完全に理解しているかどうかはわかりません。 誰かがなぜ私が他のものを使用するのか、そしてそれらがどのように異なるのか説明できますか？

91 css  css-position 

CSSでは、静的（デフォルト）配置と相対配置の違いは何ですか？

89 css  static  positioning  css-position 

私は3つのdiv要素を持っています。 1番目divは大きく（ラップ）、position:relative; 2番目divは1番目のdiv相対位置に対して絶対的に配置されます（そして1番目に含まれますdiv） 3番目divは2番目に含まれ、div絶対位置もあります。 <div id="1st"> <div id="2nd"> <div id="3rd"></div> </div> </div> 相対位置を持つ1番目ではなく、3div番目の位置が2番目div（1番目の絶対位置でもある）に対して絶対的であるのはなぜですか？divdiv 3番目divは絶対位置の2番目への絶対位置だからdivです。

89 html  css  css-position 

一部のプラグインCSSのオーバーライドに問題があります。そのCSSを直接​​編集することは、プラグインの更新のリスクを高めるため、実際にはオプションではありません。 問題：要素には絶対位置があり、元の要素にはtop：0pxがあります。bottom：0pxで上書きしたい。 例のために .element {position:absolute; top:0;} /* in another file */ .my .element {bottom:0;} Firefoxではこれは問題なく動作します（bottom：0が適用されたスタイルです）が、safari / chromeはtop：0を超えていないようです。 この問題を回避することはできますが、クリーンな解決策を考え出すとよいでしょう。

82 css  webkit  css-position 

次のスニペット（全画面モードで表示する必要があります）があり、<main>要素のすぐ下に<header>要素を配置しようとしています。私が持っている<header>、私はそれがでコンテンツをスクロールなどの画面の上部に滞在したいので、固定位置での<main>要素。私は知っているすべてのことを試しましたが、思いつくことができる最善の方法は、<header>要素を要素の上に配置して<main>、コンテンツの大きなチャンクを切り取ることです。 私が思いついた最も近い可能な解決策は、推定された上部パディングを<main>要素に置くこと<header>です。ただし、pxではなくrem sizingを使用しているため、このソリューションはさまざまな画面サイズを十分に考慮していません。<header>相対またはパーセンテージベースの高さを使用する内にいくつかの要素を配置すると、上部パディングのアイデアはさらに悪化します。ある画面サイズではすべてが完璧に並ぶ場合があり、別の画面サイズではコンテンツが途切れる場合があります。 最後に、jQueryを使用して動的に上部のパディングを設定できることはわかっていますが、常にうまく機能するとは限りません。純粋なcss / htmlソリューションがあるのだろうか。 私がここで欠けているものを誰かに教えてもらえますか？私のトップパディング方法が唯一の実行可能なソリューションですか？ $(document).ready(function() { $('#navToggle').click(function() { $("div#bottom-container > nav").slideToggle(); }); $(window).resize(function() { if(window.innerWidth >= "751") { $("header > div#bottom-container > nav").show(); }else { $("header > div#bottom-container > nav").hide(); } }); $("header > div#bottom-container > nav > ul > li > a").click(function(e) { if (window.innerWidth <= …

15 html  css  css-position  fixed