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

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

追記

html
1<section class="p-about">
2  <ul class="columns">
3    <li class="column">
4      <div class="p-lp__title">
5        hoge
6      </div>
7      <div class="p-lp__subtitle">
8        piyo
9      </div>
10      <div class="p-lp__text">
11        foo
12      </div>
13    </li>
14    <li class="column">
15      <div class="p-about__image">
16        = image_tag(asset_pack_path("images/sp.png"))
17      </div>
18    </li>
19  </ul>
20</section>
21<section class="p-feature">
22  <div class="p-lp__title">
23    hoge
24  </div>
25  <div class="p-lp__subtitle">
26    piyo
27  </div>
28  <div class="p-lp__text">
29    foo
30  </div>
31  <div class="p-feature__list">
32</section>
33
34//slim
35section.p-about
36    ul.columns
37      .column
38        .p-lp__title
39          | hoge
40        .p-lp__subtitle
41          | piyo
42        .p-lp__text
43          | foo
44      .column
45        .p-about__image
46          = image_tag(asset_pack_path("images/sp.png"))
47  section.p-feature
48    .p-lp__title
49      | hoge
50    .p-lp__subtitle
51      | piyo
52    .p-lp__text
53      | foo
54    .p-feature__list
55

css
1.p-about {
2  position: relative;
3  z-index: -2;
4}
5
6.p-feature {
7  position: relative;
8  overflow: hidden;
9  z-index: -1;
10}
11.p-feature:before {
12  content: '';
13  position: absolute;
14  top: 0;
15  left: 0;
16  width: 120%;
17  height: 110%;
18  margin: -6% -10% 0;
19  background: $color-background;
20  transform-origin: left center;
21  transform: rotate(-3deg);
22  z-index: -1;
23}

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

追記２

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

追記３

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

defghi1977

2018/04/18 09:31

考察云々の前に現象が発言するCSSコードを提示して下さい. さもなくば有益な議論や見解は得られないでしょう.

stampdoor

2018/04/18 09:39

普通にz-index効くでしょうに。

defghi1977

2018/04/18 09:48

HTMLにはHTMLのコードそのものを提示して下さい

退会済みユーザー

2018/04/18 09:52

hoge piyoなどは書かずに元の文章を書くということでしょうか？

defghi1977

2018/04/18 09:53

各種ソースコードは出来る限りWEB標準のものを使って下さい. テンプレートエンジンやメタCSS言語を使っている場合, その内容に精通している人しか回答できなくなり, 結果として適切な回答が得られにくくなります.

defghi1977

2018/04/18 09:57

https://teratail.com/help/question-tips この手の質問サイトではまず「如何に多くの人の目に止まるか」の勝負なので, 出来る限り読者の視点に立った質問とすることが肝要です.

退会済みユーザー

2018/04/18 10:13

ご指摘ありがとうございます。編集いたしましたのでよろしくお願いします。

defghi1977

2018/04/18 10:36

まだ動かんけれど, 要は「画像の手前に斜めの図形を乗っけたい」もしくは「画像を斜めに切り取りたい」という感じでしょうか？

退会済みユーザー

2018/04/18 11:22

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

defghi1977

2018/04/18 11:34

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

退会済みユーザー

2018/04/18 12:07

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

行動規範の内容に同意します

回答2件

ベストアンサー

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

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

投稿2018/04/18 10:48

defghi1977

総合スコア4756

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

HTML
1<div class="foo">
2  <p class="bar">bar</p>
3</div>
4<div class="baz"></div>

CSS
1.foo {
2  width: 100px;
3  height: 100px;
4  background-color: #fff;
5  border: 1px solid #ccc;
6  position: relative;
7  overflow: hidden;
8  z-index: 10;
9}
10.bar {
11  padding: 70px 0;
12  background-color: #55ffff;
13}
14.baz {
15  width: 100px;
16  height: 100px;
17  background-color: #f5f5f5;
18  position:absolute;
19  top: 0;
20  left: 50px;
21  z-index: 5;
22}

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

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

CSS
1.p-feature:before {
2  position: fixed;
3  top: 160px;

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

投稿2018/04/18 09:45

編集2018/04/18 10:49

Atsushi_Okumura

総合スコア355

退会済みユーザー

2018/04/18 10:20

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

Atsushi_Okumura

2018/04/18 10:35

ご提示のコードだと親要素にoverflow:hidden;が指定されていて自身のpositionがabusoluteなので親要素の外に出るような配置だと表示されないです。自身のpositionをfixedにすると親要素に影響されず表示することが出来ます。が、p-featureの擬似要素で実現しないといけない理由がないのであれば他の方法をとったほうがいいかと思います。。。

退会済みユーザー

2018/04/18 12:07

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

行動規範の内容に同意します

あなたの回答