Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                

検索対象

並び順

ブックマーク数

期間指定

  • から
  • まで

1 - 22 件 / 22件

新着順 人気順

z-indexの検索結果1 - 22 件 / 22件

タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。

z-indexに関するエントリは22件あります。 css、 CSS、 web制作 などが関連タグです。 人気エントリには 『ICS にしはら フロントエンドエンジニア@z-index完全に理解した on Twitter: "予期せぬ横スクロールが発生した時は、 * { outline: 2px solid red; } のCSSがオススメ。 どの要素がはみ出ているか、視覚的に分かりやすくなります。 #CSS https://t.co/7tmefEDCvx"』などがあります。

z-indexの関連エントリー

  • ICS にしはら フロントエンドエンジニア@z-index完全に理解した on Twitter: "予期せぬ横スクロールが発生した時は、 * { outline: 2px solid red; } のCSSがオススメ。 どの要素がはみ出ているか、視覚的に分かりやすくなります。 #CSS https://t.co/7tmefEDCvx"

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

      ICS にしはら フロントエンドエンジニア@z-index完全に理解した on Twitter: "予期せぬ横スクロールが発生した時は、 * { outline: 2px solid red; } のCSSがオススメ。 どの要素がはみ出ているか、視覚的に分かりやすくなります。 #CSS https://t.co/7tmefEDCvx"

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

      CSSのz-indexプロパティについてツイートしたところ、色んな人から参考意見をいただきました。 要素の重ね順の制御をその場しのぎで乗り切っているWebサイト、実はけっこう多いような気がします。今回はz-indexのベストプラクティスを自分なりに探ってみたいと思います。 z-indexに詳しいゼットインデクサーのみなさま、意見やアドバイスがあれば是非コメントを残していってください。 z-indexについて考えるときの前提 まず、ざっくりと考え方をまとめておきます。ウェブページの要素の重ね順を理解するには「スタッキングコンテキスト（重ね合わせコンテキスト）」を知っておく必要があります。 詳しくはz-indexとスタッキングコンテキストの関係 - ics.mediaがとても分かりやすいのですが、ここではざっくりとした説明だけ載せておきます。 z-indexは数字が大きい方が上にいくとは限らな

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

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

        CSSで要素の重なりを表現する時はスタッキングコンテキストによって決められています。スタッキングコンテキスト（Stacking Context）はウェブページ上の仮想的な奥・手前方向の概念であり、「重ね合わせコンテキスト」、あるいは「スタック文脈」とも言います。 z-indexによる重なり位置の指定もこのスタッキングコンテキストのうちの一つです。今回はz-indexより広い概念のスタッキングコンテキストの深淵を覗いてみます。 z-index:5がz-index:53万に勝つ方法 重なりといえば、z-indexです。z-indexはWeb初心者キラーなプロパティで、その値が必ずしも重なりの順序になりません。例えば次のようなz-indexが53万と5の要素があったとします。この場合、53万の要素が上にきます。 <div class="wrapper wrapper-freeza"> <div

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

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

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

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

            • z-indexの関連エントリー

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

            ポップアップやダイアログやフルスクリーンモードを実装する時などによく使用されるCSSのz-index: 10000;が必要なくなります。 Chrome 105のデベロッパーツールで「最上位レイヤー（top layer）」がサポートされました。この最上位レイヤー要素は、z-indexが最も高い要素の上に表示され、かならずドキュメントの最上位に表示されます。 最上位に表示したいコンポーネントをHTMLの最下部や最上部に記述したり、CSSのz-index: 10000;で最上位に昇格させる必要はありません。 Meet the top layer: a solution to z-index:10000 by Jhey Tompkins 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。 CSSの最上位レイヤー（top layer）とは デベロッパーツールで最

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

            • [CSS設計] 破綻しにくいz-indexの指定を考える

              概要 各コンポーネントに指定するz-indexの値を定義する。 モチベーション z-indexの衝突を避けたい z-indexの指定を理由を明確にしたい コンポーネントが増えるたびにz-indexの定義を増やしたくない 前提知識 重ね合わせコンテキスト（スタッキングコンテキスト）という概念があることを前提に話を進めるため、以下のページを合わせて読むと理解がしやすい。 重ね合わせコンテキスト - CSS: カスケーディングスタイルシート | MDN （スタッキングコンテキスト） isolation - CSS: カスケーディングスタイルシート | MDN z-indexのルール 複雑さを避けるため以下のルールを設ける。 各コンポーネント内のz-index指定を極力少なくする z-indexは0から4までの値を使用する（後述のLayer Stackに基づく指定をする） -1などの負数は使用しな

                [CSS設計] 破綻しにくいz-indexの指定を考える

              • Understanding Z-Index in CSS

                @shadeed9 Understanding Z-Index in CSS A visual guide on how z-index and stacking contexts work in CSS. What is Z-Index?The z-index property defines the order of the elements on the z-axis. Basically, it works on elements with a position value other than static. The duck and the ring are within the same parent (the water). Can you guess which will come in front of the other? <div class="water"> <d

                  Understanding Z-Index in CSS

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

                  こんにちは、 id:hogashi です。 whywaita Advent Calendar 2022 - Adventar 3日目です。 目次 目次 z-index バトル z-index が 100 より小さいもの z-index が正の値のもの 統計 z-index バトルの頂点はどこか あそびかた むすび z-index バトル id:whywaita さんの好きなアルファベットは流石に Y ということでした。ありがとうございます。 やはり僕も id:whywaita さんの id を眺めていて、 w とか y とかから z-index を想起しまして、世の中の z-index バトルがどのように繰り広げられているのか見たいと思い、 GitHub で language が css と scss のコードを検索しました。 API でバリバリ検索したら 1000件しか検索できないという

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

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

                    先日、前面に必ず出したい要素のz-indexにはcalc(infinity)をつけるとよい旨の情報を見ました。 確かに「無限」を指定すれば単純なz-indexの値の勝負では勝てそうな気がします。一方でz-indexマニアの間ではz-indexの上限値は2147483647[1]というのが常識になっています。ではこの「無限」と「2147483647」のどちらが強いのか検証しました。 結果 結論から言うとどちらも同じ値の扱いでした。calc(infinity)を指定しても上限値の2147483647でカンストするようです。 右の図のようにHTMLの順において後に書けば、「2147483647」が「無限」の上に来ました。 検証方法の説明 ここからは検証方法について軽く説明します。z-indexの強さは同一スタッキングコンテキスト上にある必要があります。そしてその中でz-indexが同じ値の場合は

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

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

                      背景 小ネタです。 先日以下のようなバグ改修タスクでソースレビューを担当しました。 「全画面モーダルを実装したら、グローバルメニューより上に表示されてしまった。なのでz-indexを修正しました！」 我々が開発しているマナリンクでは、画面右上の自分のアイコンをクリックするとメニューが表示されます。 ところが全画面モーダルを実装したら、モーダルがメニューよりも上に表示されてしまい、モーダル表示中にメニューを操作できなくなってしまったとのこと。 最初のPull Requestの時点では、以下のような差分になっていました。 <div - className={'z-50 w-full border-b border-b-gray-shadow} + className={'z-10 w-full border-b border-b-gray-shadow} > これをレビューするときの僕の気持ち

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

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

                        Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

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

                        • Debug z-index stacking content with 3D View in the Microsoft Edge DevTools

                          We are thrilled to announce the next iteration of 3D View in the Microsoft Edge DevTools, with a new feature to help debug z-index stacking context. The general 3D View shows a representation of the DOM (Document Object Model) depth using color and stacking, and the z-Index view helps you isolate the different stacking contexts of your page. 3D view is enabled by default in the Canary branch – to

                            Debug z-index stacking content with 3D View in the Microsoft Edge DevTools

                          • ep.51 Vue 3 Study『Teleport でキレイに解消するモーダルの z-index 問題』 | UIT INSIDE

                            @spring_raining が @potato4d に Vue 3 で追加される Teleport (Portal) について話を聴きました。 About Vue 3 Study 社内勉強会で開催している Vue 3 の勉強会企画 RFC を一つずつ追っていく 今は Vuex, Vue Router の新バージョンのウォッチも継続中 Guest @potato4d Teleport いわゆる “Portal” の機能の Vue.js 版 仮想 DOM 上の親子関係を飛び越えて、別の場所にある DOM に対して要素をマウントする機能 Portal の必要性と嬉しさ 実 DOM 操作する時代が終わった開発環境における z-index の取り扱いの悩みを解消 頻出するのはモーダル 子孫ではスタックコンテキストが分けられてしまっているため被り順で問題が起こる しかしモーダルの呼び出し元は子孫の

                              ep.51 Vue 3 Study『Teleport でキレイに解消するモーダルの z-index 問題』 | UIT INSIDE

                            • ワイ「z-index完全に理解した」 - Qiita

                              ある日の我が家 娘「ねぇ、パパ！」 ワイ「おお、なんや？娘ちゃん」 娘「HTMLとCSSでダイアログを作る方法を教えて欲しいの！」 ワイ「おお、ええでぇ」 ワイ「ちょうど今、ワイの個人ブログを作ってるところでな」 ワイ「これからダイアログを作るから、やり方を見せてあげるでぇ」 娘「わ〜い、ありがとう！」 娘「わたし、z-indexがうまく使えなくて困ってたの！」 ワイ「おぉ、パパに任せとき！」 ワイ「パパはz-indexを完全に理解してるからな！」 z-index完全理解ワイ、説明開始 ワイ「今、こんなサイトを作ってるんやけどな？」 ワイ「↑このサイトにダイアログを表示できるようにしたいんや」 「記事の投稿が完了しました。」 ワイ「↑こういうメッセージを表示するためのダイアログや」 娘「なるほどね」 ワイ「ほな、コードを書いていくで」 ワイ「まず、現状のコードは──」 <body> <he

                                ワイ「z-index完全に理解した」 - Qiita

                              • z-index 同士の競合を isolation: isolate; で解消する

                                本稿は、 ZOZOTOWN 開発本部のフロントエンドエンジニア有志で開催されている、スタイル分科会にて挙がったテーマを記事にしたものです。 この記事で分かること isolation: isolate; がどのような場面で有用かを解説します。 複数のコンポーネントを配置したとき、それぞれの z-index が競合したケースを例に用います。 前提 それぞれ position: absolute; の要素を内包する、 2 つのコンポーネントを横並びで配置します。 デモ メニューに hover してみてください。デフォルトでは、表示される子メニューが他のコンポーネントの z-index に負け、表示が崩れてしまいます。 「z-index の競合を解決する」ボタンを押下すると、子メニューが正しく表示されるようになります。 解説 実装コード 2 つのコンポーネントを、 マウスオーバーメニュー と カー

                                  z-index 同士の競合を isolation: isolate; で解消する

                                • CSS: z-indexの問題はisolationプロパティで解決できる（翻訳）｜TechRacho by BPS株式会社

                                  概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: Fix Any CSS Z-index Issue With This One Trick | Rails Designer 原文公開日: 2024/09/16 原著者: Rails Designer -- Railsフロントエンド関連記事に加えて、ViewComponentとTailwind CSSを用いた美しいUIコンポーネントを販売しています 日本語タイトルは内容に即したものにしました。 参考: 重ね合わせコンテキスト（stacking context） - CSS: カスケーディングスタイルシート | MDN 参考: z-index - CSS: カスケーディングスタイルシート | MDN （大仰なタイトルについてはあらかじめお詫び申し上げます...😉） z-indexプロパティは、要素の（z軸、つまりユーザーから見て

                                    CSS: z-indexの問題はisolationプロパティで解決できる（翻訳）｜TechRacho by BPS株式会社

                                  • z-indexを超越する最上位レイヤーというものを知った - Qiita

                                    概要 社内で、z-indexの値が可変な要素があったとして、その値に関わらず「それよりも常に全面に任意の要素を表示することは可能か？」という話題になったので調べてみたところ、下記の記事が出てきました。 かなりざっくり言えば、dialog要素をshowModal()で表示すればz-indexの値を超越できるという内容です。 Qiitaにも紹介記事ありますね。 https://qiita.com/nako_n/items/114e51b878753e250ce1#dialog ということで試してみました。 See the Pen z-indexを超越するモーダル by kawazu1008 (@kawazu1008) on CodePen. 詳細 HTMLは、以下の3つの要素を用意。 z-indexを指定した要素 z-indexを指定していないモーダル モーダルを表示するトリガーボタン <di

                                      z-indexを超越する最上位レイヤーというものを知った - Qiita

                                    • 【CSS】z-index管理の3指針

                                      要素の重なりを制御する時に使うCSSと言えばz-indexですが、単純にその値が上下関係になるとは限らない、少しクセのあるプロパティです。Webサイト上の重なりにはスタッキングコンテキストと呼ばれる仕組みがあり、その関係性によってz-indexの値が1でも9999の上にくることがあり得ます。 z-indexとスタッキングコンテキストの関係については次の記事にて解説されています。 この記事では自分の考えたz-index管理についての指針を紹介します。 グローバルな重なりとローカルな重なり Webサイトでの重なり表現には大きく分けて2つあります。ページ全体で重なりを管理したいものと、一部の領域で重なりを管理したいものです。この記事では前者をグローバルな重なり、後者をローカルな重なりと呼ぶことにします。 グローバルな重なりに含まれるのは、追従ヘッダーやモーダル、ハンバーガーメニュー、トースト通知

                                        【CSS】z-index管理の3指針

                                      • Safariの時、z-indexが効かない場合がある。 | RishunTrading

                                        2022年1月9日 / 最終更新日時 : 2022年1月9日 info@rishuntrading.co.jpプログラミング Safariの時、z-indexが効かない場合がある。 今回も実際の事例です。 背景を重ねて表示し、cssのz-indexを使い、背景の表示順を指定していたのですが、その際に、Safariで表示した際に、このz-indexが効かない事象に遭遇しました。 根本原因はSafariのバグっぽいのですが、transform: translateZ(1px);を用いて回避する事ができました。 メモしておきます。 z-indexが効かない条件発生時のHTML文(簡易的に記載) <body class="blog20220109"> <div class="page-header"> <p>疑似要素afterを使い、z-index:-1で画像を背景に使用</p> </div> <

                                          Safariの時、z-indexが効かない場合がある。 | RishunTrading

                                        • Meet the top layer: a solution to z-index:10000  |  Blog  |  Chrome for Developers

                                          The top layer sits above its related document in the browser viewport, and each document has one associated top layer. This means that elements promoted to the top layer needn't worry about z-index or DOM hierarchy. They also get a neat ::backdrop pseudo-element to play with. The Fullscreen API spec goes into more details as Fullscreen was a great example of the top layer in use before dialog supp

                                          • z-indexが下の要素も上の要素もクリックできるようにする - haayaaa’s diary

                                            z-indexを指定して要素を重ねている時、下になっている要素にリンクを設定したのですが、そのままだとクリック出来ない状態で困りました。 解決方法についてメモしておきます。 問題 もともとz-indexが指定してあり、２つの要素が重なっておりました。 重なっている要素のうち下の要素にリンクを設定したかったのですが、普通に設定しただけだとクリック出来ない状態でした。 解決方法 上になっている要素に、pointer-events: none; を付け加えます。 #zindex2 { // z-indexを指定して上になっている要素 略 z-index: 2; pointer-events: none; } すると、下になっている要素がクリックできるようになります！！ しかしこのままだと、上の要素にもリンクがある場合、そちらがクリック出来なくなってしまいます。 それを解決するには、上の要素の配下

                                              z-indexが下の要素も上の要素もクリックできるようにする - haayaaa’s diary

                                            • 【はてなブログ-カスタマイズ】グローバルナビゲーションの不具合対応（z-index）（CSS対応） - みやもとブログ

                                              この記事は移転しました。約2秒後に新記事へ移動します。 移動しない場合は以下をクリックしてください。 miya-moto-memo.hatenablog.com

                                                【はてなブログ-カスタマイズ】グローバルナビゲーションの不具合対応（z-index）（CSS対応） - みやもとブログ
                                              1

                                              新着記事

                                              はてなブックマーク

                                              公式Twitter

                                              はてなのサービス

                                              • App Storeからダウンロード
                                              • Google Playで手に入れよう
                                              Copyright © 2005-2025 Hatena. All Rights Reserved.