Tailwind CSSでz-indexの値をマジックナンバーにしないための小ワザ

2024/04/25 9 users Tailwind CSS マジックナンバー アイコン 我々

背景 小ネタです。 先日以下のようなバグ改修タスクでソースレビューを担当しました。 「全画面モーダルを実装したら、グローバルメニューより上に表示されてしまった。なのでz-indexを修正しました！」 我々が開発しているマナリンクでは、画面右上の自分のアイコンをクリックするとメニューが表示されます。 ところが... 続きを読む

z-indexの値は「無限」と「2147483647」どちらが強いの？

2024/02/05 22 users Calc infinity 無限 前面 常識

先日、前面に必ず出したい要素のz-indexにはcalc(infinity)をつけるとよい旨の情報を見ました。 確かに「無限」を指定すれば単純なz-indexの値の勝負では勝てそうな気がします。一方でz-indexマニアの間ではz-indexの上限値は2147483647[1]というのが常識になっています。ではこの「無限」と「2147483647」のどちらが強... 続きを読む

CSS で絶対に最前面に表示したい要素には z-index:calc(infinity) を指定する

2024/01/26 103 users Calc infinity CSS ライブラリ 最前面

いつの時代にも z-index の管理には頭を悩ませます。z-index の値には 1 以外の値を許可しないなどの管理方法がありますが、外部のライブラリを使用してる場合に勝つことができません。 そこで　z-index の値に calc(infinity) を指定すると、絶対に最前面に表示させることができます。 infinity は calc() の中で使用で... 続きを読む

z-indexバトル観戦 - hogashi.*

2022/12/03 14 users whywaita hogashi アルファベット 頂点 目次

こんにちは、 id:hogashi です。 whywaita Advent Calendar 2022 - Adventar 3日目です。 目次 目次 z-index バトル z-index が 100 より小さいもの z-index が正の値のもの 統計 z-index バトルの頂点はどこか あそびかた むすび z-index バトル id:whywaita さんの好きなアルファベットは流石に Y ということでした。... 続きを読む

CSSのz-index: 10000;はいらなくなる、要素を最上位に表示する「最上位レイヤー（top layer）」の基礎知識と使い方

2022/09/28 71 users デベロッパーツール CSS ダイアログ ドキュメント 要素

ポップアップやダイアログやフルスクリーンモードを実装する時などによく使用されるCSSのz-index: 10000;が必要なくなります。 Chrome 105のデベロッパーツールで「最上位レイヤー（top layer）」がサポートされました。この最上位レイヤー要素は、z-indexが最も高い要素の上に表示され、かならずドキュメントの最上位に... 続きを読む

CSS）z-indexのベストプラクティスを考える

2020/11/25 25 users ベストプラクティス CSS 制御 みなさま 要素

CSSのz-indexプロパティについてツイートしたところ、色んな人から参考意見をいただきました。 要素の重ね順の制御をその場しのぎで乗り切っているWebサイト、実はけっこう多いような気がします。今回はz-indexのベストプラクティスを自分なりに探ってみたいと思います。 z-indexに詳しいゼットインデクサーのみなさま、... 続きを読む

ICS にしはら?@z-index完全に理解した on Twitter: "予期せぬ横スクロールが発生した時は、 * { outline: 2px solid red; } のCSSがオススメ。 どの要素がはみ出ているか、視覚的に分かりやすくなります。

2020/06/15 296 users ICS outline CSS solid red t.co

予期せぬ横スクロールが発生した時は、 * { outline: 2px solid red; } のCSSがオススメ。 どの要素がはみ出ているか、視覚的に分かりやすくなります。 #CSS https://t.co/7tmefEDCvx 続きを読む

君は真に理解しているか？z-indexとスタッキングコンテキストの関係 - ICS MEDIA

2020/06/09 14 users コンテキスト CSS ICS MEDIA 概念 ウェブページ上

CSSで要素の重なりを表現する時はスタッキングコンテキストによって決められています。スタッキングコンテキスト（Stacking Context）はウェブページ上の仮想的な奥・手前方向の概念であり、「重ね合わせコンテキスト」、あるいは「スタック文脈」とも言います。 z-indexによる重なり位置の指定もこのスタッキングコンテ... 続きを読む

tiny-console.js · GitHub

2020/06/01 14 users GitHub SOLID position height

tiny-console.js (function(c,b,cs,r,d){ b.frameBorder=0; b.style = 'position:fixed;bottom:0;left:0;width:100%;height:30vh;background:#fff;border-top:4px solid #bbb;box-shadow:0 0 2px #000;z-index:999;cursor:ns-resize;'; b.onpointerdown=function(e){b.setPointerCapture(e.pointerId);b.e=e;b.h=b.offse... 続きを読む

いつから、z-indexがpositionだけのものだと錯覚していた？ - Qiita

2020/02/25 10 users BLEACH Qiita position 親要素 タイトル

タイトルの元ネタになっている『BLEACH』は読んだことありません。 悩ましいz-index問題 CSSを学んだことある人なら一度は通るz-index問題。単純にz-indexの値で重なりが決まるのではなく、親要素との関係によって重なりが変わるので複雑です。ついz-index: 9999はやってしまいます。（一番上なんだな、っていうのが分か... 続きを読む

CSSでレイアウトする際、z-indexが効かない時の4つの理由と対応方法 | コリス

2019/05/16 75 users プロパティ コリス CSS ルール 期待通り

CSSでレイアウトする際、z-indexが期待通りに機能しない時がありませんか？ z-indexは重なり順を定義するプロパティですが、単なる重なり順だけでなく、いくつか複雑なルールがあります。 z-indexがうまく効かない時の主な4つの理由とその対応方法について紹介します。 4 reasons your z-index isn’t working (and how t... 続きを読む

【CSS】 重なり順を指定するz-indexの使い方！効かないときの対処法と注意点も | creive【クリーブ】

2018/09/20 17 users プロパティ 順位 クリープ 要素 creive

「z-indexプロパティ」と聞くと、面倒くさいと顔をしかめる人もいるのではないでしょうか？「要素の順位を決めるプロパティであることはわかっている。でも、思い通りの順位にならないじゃないか」と感じたことはありませんか？ CSSの「z-index」は癖の強いプロパティです。単純な設定は問題なくても、複雑な設定になっ... 続きを読む

おや、Google Chromeのようすが…？／「Chrome先輩の左上の押せないスイッチの押し方はこちらです」「.switchのz-index:100にしてください」 - Togetter

2018/07/19 18 users Togetter トグル Switch Chrome スイッチ

Chromeの左上のトグルみたいなのなんなの。めっちゃ気になるんだけど！（しかもクリックしてもなにもおきない） pic.twitter.com/BFTmnTRBiq 続きを読む

技術書典で「z-indexを倒す」本を出した際の制作話 | 吉川ウェブ

2017/10/29 48 users 吉川ウェブ 技術書典

グッズのフォトブックは Photoback というところで作りました。1冊が一番安いもので1,000円＋αなので、それを1,000円販売。こちらはほとんど手に取ってすらもらえなかったですね。5冊作って、2冊買っていただき、残り3冊はモデルになっていただいた人の親御さんに買っていただきました。 値段設定 物理本 700円 電子書籍（PDFとHTML） 700円 両方セットで1,000円 ページ数は4... 続きを読む

CSS - いま俺たちに必要なのはz-indexの明確な指標だ - Qiita

2015/02/12 174 users 膨大 Qiita CSS 指標 armorik83

こんにちは、@armorik83です。こういう煽ったタイトルを書きたいってずっと思っていたので今回やってみます。 z-indexの値付けどうしてる? z-indexの説明は省略しますが、この値は取りうる範囲が膨大1でそれに対する指標が無いことから、複数のWeb設計者が入り混じる場合にバッティングする恐れがあります。 1から10までの範囲で収めていた設計者のサイトに100刻みの値付けをするプラグイン... 続きを読む

要素の重なりについて本気出して考えてみた（z-indexとか何とかとか） – No.1026

2012/09/24 208 users CSS 下層 上層 付録 HTML

あなたはhtml/cssにおける要素の重なり方を知っていますか？ z-indexを指定しなければ先に書いたほうが下層で後に書けば上層に来る？ というわけで、実は割りと複雑な要素の重なりについて書きます。そこまで意識しなくとも支障がでることは滅多にないと思いますが、知っておいて損はないはずです。 ちなみに、昨今CSS3なるものが流行していますが、この記事はW3CのCSS2.1勧告（と付録）を元に書い... 続きを読む

[JS]セレクトボックスの使い勝手をパワーアップするスクリプト -Select2 | コリス

2012/06/10 132 users セレクトボックス jQuery コリス スクリプト デモ

セレクトボックスを美しいデザインにするだけでなく、各アイテムに画像を配置したり、タグやプレースホルダテキストや検索の対応、セレクトボックスのコントロールなど、さまざまなことができるjQueryのプラグインを紹介します。 Select2の対応ブラウザ Select2のデモと実装 Select2の対応ブラウザ Select2の対応ブラウザは下記の通りです。 IE8+ ※IE7はz-indexを使った一... 続きを読む

スマホでの面白いトップナビゲーションの見せ方チュートリアル:phpspot開発日誌

2012/04/03 41 users phpspot開発日誌 スマホ fixed position

Pull Down for Navigation - Inspect Element スマホでの面白いトップナビゲーションの見せ方チュートリアルがデモ付きで公開されています。 実際にデモを実機で試すのが一番よいかもしれません。position:fixed と z-index をうまく組み合わせて実現されています。 １つのテクニックとして認知しておくだけでも今後のアイデアに活用できるかも デモページ... 続きを読む

CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ

2011/11/07 2951 users フロート 必須 CSS レイアウト 配置

CSSの視覚整形モデルについてのまとめです。CSSでレイアウトするときに必須な配置についてのレポートです。フロート、相対配置、絶対配置、z-indexなどはもちろん、通常フローや包含ブロックなど、基本的な部分をまとめてみました。最近改めて CSS の基本、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間... 続きを読む