Mac版Safariとoverflowとposition:fixedの話 - kinalog
久々に大きめのサイト構築をしているんだけど、なんかものすごい初歩的な部分でつまづいたので実験。 縦いっぱいにメニューを配置して、position: fixedにし、Y方向にはみ出た部分はスクロールできるようにする、っていう下記のようなレイアウトのページを作ります。 で、上記のメニュー部分をHTML化したのがこれ。 下層コンテンツを入れ子にすることで、JSとか組まなくてもCSSだけで簡単に実装できる複数階層のメニューです。 ChromeとFirefoxでは想定通り、オンマウスでメニューの右側に「はみだすエリア」が表示されてます。 ところがSafariで見てみたところ、はみだすエリアが表示されてない！ 解決方法 半日ぐらい悩んでたんだけど、解決方法は驚くほど簡単だった。 overflow-x: visible; overflow-y: scroll;としていたものを、 overflow: au
CSSのposition:stickyがすごく便利 | q-Az
最近新しく追加された position の新しい値 sticky が場合によってはすごく便利なので記事を書いてみます。 対応ブラウザがまだあまり多くないので実用性は乏しいかもしれませんが、今まで JavaScript の力を借りなきゃ出来なかったことがたったの2行の CSS で出来てしまう魔法みたいな position の値です。 position: stickyMDN が説明が詳しいので貼っておきます。 参考：position - CSS｜MDN 簡単に言うと「スクロールでその位置まで来たらそれ以降は fixed する」みたいな感じです。 サンプルこの記事内で「position: sticky」や「サンプル」など h2 要素に position: sticky をかけています。対応ブラウザであれば h2 要素が fixed しているはずです。 HTML<h2 class="h2-stic
【まさに底なし沼】あの「左側から出てくるメニュー」を普通に動かすのに奮闘した話【iosとposition: fixed;の闇】
【まさに底なし沼】あの「左側から出てくるメニュー」を普通に動かすのに奮闘した話【iosとposition: fixed;の闇】 皆様、いかがお過ごしであろうか？ 最近Web系の記事を書いていないが、現実世界ではそれなりにエンジニアしている野地である。 今回は、最早辺り前となっているレスポンシブデザインのサイトを作る際に意外と苦労した「左横から出てくるメニュー」の最適解を探す記事を書こうと思う。 実装するだけならさほど難易度の高くないこの機能、実はこだわればこだわるほど泥沼にはまっていく機能なのだ。 実際なにが問題で、どうやって解決するかは記事の中で説明していくが、たどり着いた最終的なコードは最後の部分に書いておくので、さっさとコードをよこせ！ という人はそこを参照してほしい。 目次 要件 問題その1.背景がスクロール可能+ios版Safariの下部メニューバーが動いてしまう 問題その2.i
iOSでposition:fixedした要素がスクロール中だけz-indexを無視して前面に表示されてしまうバグ - Qiita
ブラウザの表示領域に対して要素の位置を固定してくれるposition: fixed;は、表示領域が限られるスマートフォンでこそ使いどころがたくさんあるのだが、（特にAndroidで）バグが多くて実用にはまだまだ慎重にならざるを得ない。 今回は、iOSで遭遇したバグについて記述しておく。 症状 position: fixedを指定した要素がz-indexを無視する。 精確に説明すると、position: fixedを指定した要素が、表示領域外にある部分が、スクロールされて表示領域に入ってきたときに、スクロールされている間だけ、z-indexが無視されて、より大きなz-indexが指定されている（即ちより手前の）要素より前面に表示される。 実際のコードをご覧いただこう。 <div class="contents">ここに通常のコンテンツ</div> <div class="bg"></div>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ファッション誌「JJ」で、男性を「“さ”行で褒める」の“そ”が「そうなんだー」からいつの間にか破壊力抜群のワードに変わっていた
