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

CSSの "position"プロパティを使用すると、値を静的（デフォルト設定）、相対、絶対、固定、または固定に設定することで、ページ上の要素の位置を制御できます。

25
「位置：絶対」要素を中央に配置する方法
属性がにposition設定されている要素を中央に配置するときに問題が発生しabsoluteます。画像が中央に配置されない理由を誰かが知っていますか？ body { text-align: center; } #slideshowWrapper { margin-top: 50px; text-align: center; } ul#slideshow { list-style: none; position: relative; margin: auto; } ul#slideshow li { position: absolute; } ul#slideshow li img { border: 1px solid #ccc; padding: 4px; height: 450px; } <body> <div id="slideshowWrapper"> <ul id="slideshow"> <li><img src="img/dummy1.JPG" alt="Dummy 1" …
23
位置は固定ですが、コンテナに対して相対的です
私は修正しようとしていますdivので、それは常に画面の上部にくっつきます： position: fixed; top: 0px; right: 0px; ただし、はdiv中央のコンテナ内にあります。使用するposition:fixedとdiv、ブラウザウィンドウの相対位置が修正されます。たとえば、ブラウザの右側に当たるようになります。代わりに、コンテナに対して相対的に修正する必要があります。 をposition:absolute基準にして要素を修正するために使用できることはわかっていますがdiv、ページを下にスクロールすると、要素は消失し、のように上部に固定されませんposition:fixed。 これを達成するためのハックまたは回避策はありますか？
16
位置を中央揃え：固定要素
position: fixed;画面の中央に動的な幅と高さのポップアップボックスを作成します。私margin: 5% auto;はこれに使用しました。なければposition: fixed;、それはではなく、垂直、水平に罰金を中央に配置します。を追加した後position: fixed;も、水平方向の中央に配置されません。 これが完全なセットです： .jqbox_innerhtml { position: fixed; width: 500px; height: 200px; margin: 5% auto; padding: 10px; border: 5px solid #ccc; background-color: #fff; } <div class="jqbox_innerhtml"> This should be inside a horizontally and vertically centered box. </div> コードスニペットを実行するHide resultsスニペットを展開 CSSでこのボックスを画面の中央に配置するにはどうすればよいですか？
12
スクロールバーがある場合でも、divを常にページのコンテンツの下部に留める
CSSはDivをページの下部にプッシュします そのリンクを見てください、私は反対が欲しいです：コンテンツがスクロールバーにオーバーフローするとき、私はフッターが常にスタックオーバーフローのようにページの完全な下部にあることを望みます。 私はdiv id="footer"とこのCSS を持っています： #footer { position: absolute; bottom: 30px; width: 100%; } ただし、ビューポートの下部に移動するだけで、下にスクロールしてもそのまま表示されるため、下部に表示されなくなります。 画像： 明確にされていない場合は申し訳ありませんが、私はそれがすべてのコンテンツの実際の下部にあるためにのみ修正されることを望んでいません。
20
「位置：粘着性がある」CSSとHTMLが機能しない
スクロールした後、ナビゲーションバーを一番上に固定したいのですが、うまくいきません。理由がわかりません。あなたが助けてくれるなら、これが私のHTMLとCSSコードです： .nav-selections { text-transform: uppercase; letter-spacing: 5px; font: 18px "lato",sans-serif; display: inline-block; text-decoration: none; color: white; padding: 18px; float: right; margin-left: 50px; transition: 1.5s; } .nav-selections:hover{ transition: 1.5s; color: black; } ul { background-color: #B79b58; overflow: auto; } li { list-style-type: none; } <nav style="position: sticky; position: -webkit-sticky;"> <ul align="left"> …
177 html  css  css-position 
8
親のパディングを無視した絶対配置
絶対配置要素にその親のパディングをどのように反映させるのですか？内側のdivをその親の幅全体に広げて、その親の下部、基本的にはフッターに配置する必要があります。しかし、子供は親のパディングを尊重する必要があり、それはそれをしていません。子は親の端に押し付けられます。 だから私はこれが欲しい： しかし、私はこれを手に入れています： <html> <body> <div style="background-color: blue; padding: 10px; position: relative; height: 100px;"> <div style="background-color: gray; position: absolute; left: 0px; right: 0px; bottom: 0px;">css sux</div> </div> </body> </html> 内側のdivの周りにマージンを設けることもできますが、追加する必要はありません。
5
コンテンツがオーバーフローした場合にスクロールする必要がある固定位置のdivがある
私は実際には2つの問題を抱えていますが、最初の問題を最初に解決しましょう。 メニューのスクロールの左側に固定位置divがあります。右側は、適切にスクロールする標準のdivです。問題は、ブラウザのビューポートが小さすぎてメニュー全体を表示できない場合です。スクロールして表示する方法がありません（少なくともcssではできません）。CSSで別のオーバーフローを使用してみましたが、divがスクロールしません。メニューを含むdivは、min-height：100％とposition：fixed ..に設定する必要があります。両方の属性を保持する必要があります。 メニューを含むdivは、絶対的に配置され、高さが100％に設定された別のラッパーdiv内にあります。 コンテンツがdivに対して高すぎる場合、どうすれば垂直にスクロールできますか？ それは私にスクロールバーを表示したくないという他の問題を引き起こします...しかし、私はすでにその答えを持っていると思います（divをスクロールできないため、まだ動作しません）はじめに）。 解決策はありますか？おそらくJavaScriptが必要ですか？（私はほとんど知りません） JS Fiddleの例 そして、問題を引き起こしている関連コード（ここにすべてを投稿すると長すぎるので）： .fixed-content { min-height:100%; position:fixed; overflow-y:scroll; overflow-x:hidden; } height：100％も追加してみて、それが問題であるかどうかを確認しましたが、どちらも機能しませんでした。
7
jQueryで、ドキュメントではなく親を基準にした位置の値を持つ要素の「top、left」プロパティを設定するにはどうすればよいですか？
.offset([coordinates])メソッドは要素の座標を設定しますが、ドキュメントに対してのみです。次に、要素の座標を親に対して相対的に設定するにはどうすればよいですか？ 見つけた .position()メソッドは、親に相対的な「上、左」の値のみを取得する、値は設定されていません。 私が試した $("#mydiv").css({top: 200, left: 200}); しかし動作しません。
4
CSS：position：absolute divをposition：relative div内でコンテナのオーバーフロー：hiddenでトリミングしないようにする方法
私は3つのレベルがありdivます： （緑色以下）トップレベルdivを有しますoverflow: hidden。これは、ボックスのサイズを超える場合、そのボックス内の一部のコンテンツ（ここには表示されていません）をトリミングしたいためです。 （中には、下記赤）、この内部では、私が持っているdivとposition: relative。これは、次のレベルでのみ使用できます。 （下の青で）最後divに、フローから取り出しましたが、ページに対してではなくposition: absolute、赤に対して配置したいと思いdivます。 青いボックスを流れから外して、緑のボックスを超えて拡張させたいのですが、次のように赤いボックスに対して相対的に配置します。 しかし、以下のコードで、私は得ます： そしてposition: relative、赤いボックスのを削除すると、青いボックスが緑のボックスから出ることが許可されますが、赤いボックスに対して相対的に配置されなくなります。 方法はありますか： overflow: hidden緑色のボックスに保管してください。 青色のボックスが緑色のボックスを超えて拡大し、赤色のボックスに相対的に配置されていますか？ 完全なソース： #d1 { overflow: hidden; background: #efe; padding: 5px; width: 125px; } #d2 { position: relative; background: #fee; padding: 2px; width: 100px; height: 100px; } #d3 { position: absolute; top: 10px; background: #eef; padding: 2px; …
10
'transform3d'が位置で機能しない：修正された子
通常のCSS環境で、固定divが指定された場所に正確に配置される状況があります（top:0px、left:0px）。 translate3d変換を持つ親がいる場合、これは尊重されないようです。私は何かを見ていませんか？スタイルやトランスフォームの元のオプションのような他のwebkit-transformを試しましたが、うまくいきませんでした。 黄色のボックスがコンテナー要素の内部ではなくページの上部隅にあると予想される例をJSFiddleに添付しました。 以下に、フィドルの簡略版を示します。 #outer { position:relative; -webkit-transform:translate3d(0px, 20px , 0px); height: 300px; border: 1px solid #5511FF; padding: 10px; background: rgba(100,180,250, .8); width: 80%; } #middle{ position:relative; border: 1px dotted #445511; height: 300px; padding: 5px; background: rgba(250,10,255, .6); } #inner { position: fixed; top: 0px; box-shadow: 3px 3px 3px #333; …
25
iOS 5の固定配置と仮想キーボード
私は、position：fixedを介して画面の下部にdivが固定されているモバイルWebサイトを持っています。フォームのあるページを表示するまで、iOS 5（iPod Touchでテストしています）ではすべて正常に動作します。入力フィールドをタップして仮想キーボードが表示されると、divの固定位置が突然失われます。キーボードが表示されている限り、divはページとともにスクロールします。[完了]をクリックしてキーボードを閉じると、divは画面下部の位置に戻り、position：fixedルールに従います。 他の誰かがこのような行動を経験しましたか？これは予想されますか？ありがとう。
3
位置：絶対に左プロパティを削除する方法
特定の言語を選択すると、サイトのCSSをRTLバージョンに上書きします。 絶対配置が必要な要素があります。LTRバージョンではleft: 0px;、左に揃えています。RTLバージョンでは、反対のことをで行いたいのですrightが、leftプロパティはオーバーライドされないため、左側にとどまります。 でハッキングを試みました!importantが、うまくいきませんでした。 設定しようとしましたleft: noneが、うまくいきませんでした。 オーバーライド中にnoneに設定するか、完全に削除するにはどうすればよいですか？
137 css  css-position 
4
絶対位置とオーバーフローを非表示にする
2つのDIVがあり、一方はもう一方に埋め込まれています。外側のDIVが絶対配置されていない場合、絶対配置されている内側のDIVは、外側DIVの非表示のオーバーフローに従いません（例）。 外側のDIVを絶対位置に設定せずに、内側のDIVが外側のDIVのオーバーフローを非表示にする可能性はありますか？また、テーブルTD（例）から「成長」する必要があるため、内部DIVの相対位置はオプションではありません。 他のオプションはありますか？
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.