Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
10
Help us understand the problem. What is going on with this article?
@nabepon

【React】z-indexで困る問題

More than 3 years have passed since last update.

【React】z-indexで困る問題

by nabepon
1 / 26

今日のテーマ


私はz-indexが嫌い


なぜ?

->デモ解説


step 0

  • スクロールするとModalボタンがheaderに被ってしまう

ヘッダーの z-inedx 1、ドロワーの z-index 2、モーダルは z-index 10。
ヘッダーはしばらくスクロールするとfixedになってmainの上に表示される。
モーダルをヘッダーの上に表示したいので z-index 10 になっているが、
コンテナにz-indexがついているのでボタンまで上に表示されてしまう。

step 1

  • ヘッダーをボタンより上に表示したくて、z-index 20 にする

「Next 0」ボタンを1回押して次に進める。
Modalボタンはヘッダーの下にくるようになったが、
Modalボタンを押すとモーダルがヘッダーに下に出てしまう。
ヘッダーが20、モーダルが10なので、そりゃそうだ。

step 2

  • .modal をヘッダーより上に表示したくて、z-index 30 にする

「Next 1」ボタンを1回押して次に進める。
すると、ヘッダーが20、モーダルが30にもかかわらず、
モーダルがヘッダーの下に表示されてしまう。
モーダルのコンテナ(.modalComponent)が10だからだ。

step 3

  • .modalComponentのz-indexをinitialにする

「Next 2」ボタンを1回押して次に進める。
すると、ヘッダーが20、モーダルが30の順番通りになって、無事モーダルが表示されて!
一見うまくいったようにみえる。
しかしドロワーを開いてみると、今度はドロワーがヘッダーの下に表示されてしまっている。
ヘッダーが20、ドロワーが2なので当然である。

step 4

  • ドロワーを40にしよう!

「Next 3」ボタンを1回押して次に進める。
すると、ドロワーが z-index 40 になり、無事ヘッダーの上に表示された!

これで解決?

今回はわざとアホらしいz-indexのサンプルを作ったが、
業務中でもこういったz-index問題は意外と起る。
しかも、他人の書いたコードに影響を受けまくるし、
z-indexをいじると他人の書いたコードに影響も与えやすい。
しかもバグっていることに気づきにくいし、z-indexは調査もしずらい。
注意深く作ることで回避はできるが、健全な回避方法とは言い難い。

z-indexは、最後の手段にしよう・・・
できればちゃんとDOMtreeの順番通りに表示されるのが直感的だし、
バグも少なく扱いやすい。


めでたしめでたし


そんなわけねーだろ!


今日のお話


【React】z-indexで困る問題


自己紹介

  • 渡辺 貴明
  • nabepon_dev follow me!
  • アジアクエスト株式会社
  • フロントエンドエンジニア

直近でやったプロジェクト

某飲食サービスの姉妹サービス
お察し...
react, redux, css modules, react-router etc...


旧時代

モーダル、fixedヘッダー、ドロワーメニューなど、
手前に表示する要素の実装。

jQuery時代だと、DOM treeの最後の方に表示することで、
z-indexに頼らずとも実装することができた。


手前に表示したいやつはbodyにappend

var $modal = $('<div class="modal">modal</div>')
$(body).append($modal);

表示順もDOMをゴリゴリ弄ればいいだけなので、
jsでなんとかすることができた。


現代

Reactだとこういったことができない。
できるが、React上でDOMを探してappendするようなコードは書きたくない。
ではReactではどう実装するかというと、2パターンが考えられる。


1つはz-indexで頑張る方法。

もう1つはDOMの後ろにあらかじめ配置しておく方法。


DOMの後ろにあらかじめ配置

<div id="root">
  <HeaderComponent />

  <main>
    <div>
      ...
      <FooComponent>
        <button onClick={openFoo}>open</button>
      </FooComponent>
      ...
      <BarComponent>
        <button onClick={openBar}>open</button>
      </BarComponent>
      ...
      ...
    </div>
  </main>

  <FooterComponent />

  <ForwardLayer>
    {isFooOpen ?
      <div class="fooModal"> foo </div>
    : null }

    {isBarOpen ?
      <div class="barModal"> bar </div>
    : null }
  </ForwardLayer>
</div>

Reactだと事前にコンポーネントを配置し、
条件分岐でコンポーネントの表示非表示を行う。
面倒くさい。


Reactでも別の場所に表示したい!


ソリューション



ライブラリを書いた

react-transfer

※ Google翻訳しただけのREADME。翻訳PR待ってます...


使い方

Usageをみる。
Transporter内にある、TransportItemの要素を、Destinationに表示する。
Example
Demo


<div>- component code start</div> から
<div>- component code end</div>
間にコードが書かれているが、実際に表示されるのは
<div>- display component</div> の下。

また、表示前のソート処理を行うなどできるので、
jsで表示順を制御できる。

テストコード があるので、そっち見た方がわかりやすいかも。


【React】z-indexで困る問題


解決!(?)


アジアクエストではメンバーを無限に募集してます!

お仕事も募集してます!
受託開発も業務委託も、
どちらもご相談くださいませ。

nabepon_dev

10
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
asia-quest
DX実現を目指す企業と並走する「デジタルインテグレーター」です。 通常のシステムインテグレーションだけではなく、お客様のDXを共に考えるコンサルティングから、 DXに必要な様々なデジタルテクノロジーの専門チームを有し、お客様のゴールに向けてシステムの設計、開発、運用までを一貫して請け負います。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
10
Help us understand the problem. What is going on with this article?