質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.35%

  • CSS

    6177questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

overflowを指定するとz-indexが効かなくなることについて。

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 2
  • VIEW 986

YoshinoriMiwa

score 45

overflow: hidden;を指定すると、なぜz-indexは効かなくなってしまうのでしょうか。
overflowはauto以外の値が設定された時にスタックコンテキストを生成するのでしょうか。
どのサイトをみても、"z-indexが効かない時はoverflowを入れていないかチェック!"みたいなことしかでてこず、なぜ両者は共存できないのか疑問です。
疑問文ばかりですみません。根本的な原因?がわかる方いらっしゃいましたらご教授お願いします。

 追記

<section class="p-about">
  <ul class="columns">
    <li class="column">
      <div class="p-lp__title">
        hoge
      </div>
      <div class="p-lp__subtitle">
        piyo
      </div>
      <div class="p-lp__text">
        foo
      </div>
    </li>
    <li class="column">
      <div class="p-about__image">
        = image_tag(asset_pack_path("images/sp.png"))
      </div>
    </li>
  </ul>
</section>
<section class="p-feature">
  <div class="p-lp__title">
    hoge
  </div>
  <div class="p-lp__subtitle">
    piyo
  </div>
  <div class="p-lp__text">
    foo
  </div>
  <div class="p-feature__list">
</section>

//slim
section.p-about
    ul.columns
      .column
        .p-lp__title
          | hoge
        .p-lp__subtitle
          | piyo
        .p-lp__text
          | foo
      .column
        .p-about__image
          = image_tag(asset_pack_path("images/sp.png"))
  section.p-feature
    .p-lp__title
      | hoge
    .p-lp__subtitle
      | piyo
    .p-lp__text
      | foo
    .p-feature__list
.p-about {
  position: relative;
  z-index: -2;
}

.p-feature {
  position: relative;
  overflow: hidden;
  z-index: -1;
}
.p-feature:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 110%;
  margin: -6% -10% 0;
  background: $color-background;
  transform-origin: left center;
  transform: rotate(-3deg);
  z-index: -1;
}


イメージ説明
画像が非常に見辛いですが、青色の部分を前面にだして重なりを表現したいのです。
overflow: hidden;を指定すると、おそらくですが、画像の後ろ側に擬似クラスの部分が隠れてしまっていると思います。
overflow: hidden;を消すと、手首と重なる位置に背景色が表示されるのですが、擬似クラスで回転させている要素がはみ出したままになります。
稚拙な日本語ですみません。

 追記2

  • テンプレートエンジンにslimを使用しています。
  • cssはscss記法です。
  • ライブラリ?にbulmaを使用しています。

 追記3

追記1にもとのhtmlを載せました。間違いなどあってはいけないと思い、slimも一応残してあります。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • YoshinoriMiwa

    2018/04/18 20:22

    https://qiita.com/sho012b/items/3478ca65fe5b6de0450aこのサイトを参考にして、斜めの線を引きたいと思っています。aboutとfeatureのセクション間のスペースがデザイン上きになったので、手首の位置まで斜めの線を被せられたらなと思っています。

    キャンセル

  • defghi1977

    2018/04/18 20:34

    このページの斜めテクニックって応用が非常にしんどいのでおすすめできねぇです. 以前もこれに絡んだ質問があって https://teratail.com/questions/97871 なんとかしましたが, やはり正攻法で画像の切り抜きもしくはSVGを使った図形定義のほうが後々のメンテが楽だと思います.

    キャンセル

  • YoshinoriMiwa

    2018/04/18 21:07

    なるほど、そのような方法もあったのですね。ありがとうございます。ググって見たいと思います!

    キャンセル

回答 2

checkベストアンサー

+1

質問の根本に対する回答ではありませんが, 図形・画像を重ねる・加工するといった目的でCSSを利用する場合, z-indexの他にも今日では様々な手段があるため, 色々試してみたらよかろうと思います. 
(疑似要素の利用だけでは自ずと表現の幅に限界があります)

  • backgroundプロパティ群の複数指定
  • mask/clip-pathプロパティによるノードの切り抜き
  • SVGを使った画像の加工

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

z-indexとoverflowには何の因果関係もないと思われます。

<div class="foo">
  <p class="bar">bar</p>
</div>
<div class="baz"></div>
.foo {
  width: 100px;
  height: 100px;
  background-color: #fff;
  border: 1px solid #ccc;
  position: relative;
  overflow: hidden;
  z-index: 10;
}
.bar {
  padding: 70px 0;
  background-color: #55ffff;
}
.baz {
  width: 100px;
  height: 100px;
  background-color: #f5f5f5;
  position:absolute;
  top: 0;
  left: 50px;
  z-index: 5;
}


codepenで確認する↓
https://codepen.io/RaRukAnA/pen/VxwPMe

質問者様のコードで試しました。
fixedに変更すると表示される(topの数値は適当です。)

.p-feature:before {
  position: fixed;
  top: 160px;


codepenで確認する↓
https://codepen.io/RaRukAnA/pen/aGbWvV

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/18 19:20

    beforeなどの擬似クラスで生成した要素を前面にだしたい場合に、ご回答していただいたコードでは重なりがうまく表現できないと思うのですが。。私の書き方が悪いのですかね。。

    キャンセル

  • 2018/04/18 19:35

    ご提示のコードだと親要素にoverflow:hidden;が指定されていて自身のpositionがabusoluteなので
    親要素の外に出るような配置だと表示されないです。
    自身のpositionをfixedにすると親要素に影響されず表示することが出来ます。

    が、p-featureの擬似要素で実現しないといけない理由がないのであれば他の方法をとったほうがいいかと思います。。。

    キャンセル

  • 2018/04/18 21:07

    なるほど、そういうことだったのですね。非常に勉強になりました。
    擬似クラス以外の方法を考えた方が良さそうですね。

    キャンセル

同じタグがついた質問を見る

  • CSS

    6177questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。