[B! position] nelpesicaのブックマーク

nelpesica id:nelpesica

positionに関するnelpesicaのブックマーク (3)

CSS Fixedしたコンテンツでスクロールさせたい - かもメモ
モバイルのメニューとかposition: fixedでデザインしたけど、メニューが長かったりデバイス回転させたりしたらメニューが見切れるからfixedしたモーダル内でスクロールを表示させたい時の実装方法のメモ top, left, right, bottom と overflow を利用する .modalNav { position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow-y: auto; } position: fixedと一緒に top: 0, bottom: 0, left: 0, right: 0 を使用するとコンテンツがエリア全体に伸びるので、そこにoverflowの指定があればfixedしたコンテンツであってもスクロールを表示させることができるようです。縦方向のスクロールを発生させるだけならtop: 0;と
nelpesica 2020/03/19
検索

position

fixrd

スクロール
リンク
position:absoluteした要素に可変の高さを与える - Qiita
追記なんか1年くらいかかりはしましたが2万viwe超えました。他の記事なんか1000にも満たないことが多いので驚きです。よく検索されているようなのでもしわかりにくいことがあればコメントください。本題 positionは便利だけど、リキッドデザインで使う場合囲んだdivなどにposition:absoluteを当てると画像の伸縮がうまくいかなくなる。これは高さを指定しないから起こるのだが、高さ固定したらそもそもdivの中の画像が伸縮しなくなるじゃん！！こんな場面に出会った人は少なくないはず、多分。どうにかなります .box { position: relative; width: 50%; height: auto; background: #444; } .ratio-1_1:before { content: ""; display: block; padding-top
nelpesica 2020/03/13
検索

position

absolute

高さ
リンク
[CSS]要素を上下左右の中央に配置、最近主流になっている実装方法のまとめ | コリス
子要素を親要素の左右の中央寄せに配置するのは、簡単です。インライン要素は「text-align: center;」で、ブロック要素であれば「margin: 0 auto;」で中央に配置できます。難しいのは天地、上下の中央です。 CSS Hackはなしで、要素を上下左右の中央寄せに配置する実装方法を紹介します。 Absolute Centering with CSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 positionプロパティを使って、要素を上下左右の中央寄せに配置単位vhを使って、要素を上下左右の中央寄せに配置 Flexboxを使って、要素を上下左右の中央寄せに配置 CSS Gridを使って、要素を上下左右の中央寄せに配置 positionプロパティを使って、要素を上下左右の中央寄せに配置「position
nelpesica 2019/09/09
検索

position

ポジション

中央
リンク
1