z-indexをマイナスにすると要素がデスク上から消える

前提・実現したいこと

固定されている親要素aの上に親要素bがスクロールした時に重なるようにしたい

z-indexを用いて重なり順を指定しようとしたが思い通りにいかなかった。

問題点

親要素aに z-index:-1; を入力するとデスク上から消える

親要素aに　z-index:1;　親要素bに　z-index:2;　を指定すると親要素bが親要素aの下に潜り込んでしまった。

該当HTMLコード

<!DOCTYPE html>
<html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="shortcut icon" href="img/favicon.ico">
  <meta name="description" content="子供から大人まで、プログラミングを学ぶなら
  、Codera">
  <title>準備を済ませたテンプレート</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/styls.css">
</head>

<!-- 本文 -->

<body>
  <!-- header -->
<header>
  <div class="container header-container">
    <div class="header-inner">
       <h1>HIPOTAMA.</h1>
       <nav class="header-list">
         <ul>
           <li>TOP</li>
           <li>ABOUT</li>
           <li>SERVICE</li>
           <li>WORKS</li>
           <li>BLOG</li>
           <li>CONTACT</li>
         </ul>
       </nav>
    </div>
  </header>

<!-- /header -->

<!-- main -->
<!-- 親要素a -->

<section class="main1">

<div class="container">
  <div class="main">
    <div class="main-syasin">
      <img src="img/kizi3.jpg" alt="">
    </div>
    <div class="main-text">
      <h1>Web Design</h1>
      <h1>for</h1>
      <h1>Marketing</h1>
      <div class="sub-text">
        <p>ホームページ制作を通じて新たな価値を創造する</p>
        <p>京都丸太町のWebデザインオフィス・HIPOTAMA</p>
      </div>
    </div>
  </div>
</div>

</section>

<!-- /main -->
<!-- 親要素b -->

<section class="main2">
  <div class="container">


  <div class="midasi">
    <div class="midasi-text">
      <h1>WELCOME <span>TO</span>  HIPOTAMA</h1>
      <h4>京都丸太町のWebデザインオフィス・HIPOTAMA</h4>
    </div>
    <div class="midasi-text-inner">
      <p>HIPOTAMA（ヒポタマ）は京都・丸太町のオフィスを拠点に、ホームページ制作やECサイトの運営を行っております。</p>
      <p>起業されたばかりの方や、ホームページのリニューアルをお考えの方々の”力”になるべく</p>
      <p>ご相談から制作、納品後のサポートまで一貫して承ります。</p>
    </div>
    <div class="midasi-btn">
      <p>ABOUT</p>
    </div>
  </div>

  </div>
</section>

該当CSSコード

html,body{
  font-size: 1.3vw;
  background-color: #f2f0e8;

}

.container{
 max-width: 1300px;
 margin: 0 auto;
}

/*====ヘッダー====*/

.header-inner li{
  list-style-type: none;
  float: right;
  margin-left: 30px;
}

.header-inner h1{
  margin: 0;
}

.header-inner ul{
  position: absolute;
  top:0;
  right:0;
}

.header-container{
  position: relative;
}

.header-inner li{
  display: inline-block;
  padding-bottom: 4px;
  padding-top: 2px;
  position: relative;
}

.header-inner li::after {
  background-color:#333;
  bottom: 0;
  content: '';
  display: block;
  height: 2px;
  left: 0;
  position: absolute;
  transition: .4s all;
  width: 0;
}

.header-inner li:hover::after {
  width: 100%;
}

.header-inner li::before {
  background-color:#333;
  top: 0;
  content: '';
  display: block;
  height: 2px;
  right: 0;
  position: absolute;
  transition: .4s all;
  width: 0;
}

.header-inner li:hover::before {
  width: 100%;
}

header{
  position: sticky;
  top: 0;
  width: 100%;
  height: 60px;
  z-index: 999;
  background-color: #f2f0e8;
}

/*====親要素a====*/
.main1{
  position: sticky;
  top: 60px;
  z-index: 1;
}
/*====/親要素a====*/

/*====親要素b====*/
.main2{
 background:pink;
z-index: 2;
}
/*====/親要素b====*/


/*====メイントップ====*/
/*====親要素aの中身====*/

.main-syasin img{
  width: 100%;
  height: 750px;
  position: relative;
}

.main-text{
color: #fff;
position: absolute;
top: 14%;
left: 7%;
}

.main-text h1{
  font-size: 5em;
  margin: 0;
}

.sub-text{
  margin-top: 40px;
  padding: 14px 0;
  text-align: center;
  background:repeating-linear-gradient(-30deg, #02020285 0, #02020285 6px,transparent 6px,transparent 12px);
}


.sub-text p{
  margin: 10px;
}

/*====/メイントップ====*/

/*====親要素bの中身====*/

.midasi-text{
  padding-bottom: 10px;
  margin-bottom: 40px;
  line-height: 0.5;
  position: relative;
}

.midasi-text h4::after{
  position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
width: 30px;
padding-left: 2px;
color: rgb(49, 19, 1);
transform: translateY(50%);
font-size: 5px;
content: "◆";
letter-spacing: 0px;
margin: auto;
background: 0px 0px;
}

.midasi-text::before{
  position: absolute;
  bottom: 0;
  right: 50%;
  width: 50px;
  height: 1px;
  margin: 0 15px 0 0;
  background: #333;
  content: '';
}

.midasi-text::after{
  position: absolute;
bottom: 0;
left: 50%;
width: 50px;
height: 1px;
margin: 0 0 0 15px;
background: #333;
content: '';
}

.midasi{
  text-align: center;
  padding: 50px 0;
}

.midasi-text h4{
  font-size: 0.8em;
  font-weight: normal;
}

.midasi-text h1{
  font-size:3em;
}

h1 span{
  margin: 0 20px;
}

.midasi-text-inner {
  line-height: 1.0;
  font-size: 0.8em;
}

.midasi-btn{
  width: 22%;
  text-align: center;
  margin: 0 auto;
  border: 2px solid #333;
  border-radius: 4px;
  top: 0;
  text-align: center;
  overflow: hidden;
  position: relative;
}

.midasi-btn::before{
 background-color:#0000;
 bottom: 0;
 content: '';
 display: block;
 height: 100%;
 left: 0;
 position: absolute;
 transition: .2s all;
 width: 100%;

}

.midasi-btn:hover::before{
  background-color:#333;
  bottom: 0;
  content: '';
  display: block;
  height: 200%;
  top: 0;
  left: 0;
  position: absolute;
  transition: .2s all;
  width: 100%;
  transform: rotate(180deg);
}

.midasi-btn::after{
 color:#0000;
 bottom: 0;
 content: '';
 display: block;
 height: 70%;
 left: 38%;
 position: absolute;
 transition: .2s all;
 width: 20%;

}

.midasi-btn:hover::after{
 color:#fff;
 bottom: 0;
 content: 'ABOUT';
 display: block;
 height: 70%;
 left: 38%;
 position: absolute;
 transition: .2s all;
 width: 20%;

}

試したこと

z-indexの値を色々変えながら試した

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

回答2件

ベストアンサー

原因は、親要素bに対してのz-indexが無効になっているからです。
positionのデフォルト値である、staticの要素には、z-indexは効かないため、
z-indexが有効になっている親要素aが上になったり、-1によって、bodyの下に潜り込んだりしているわけです。
よって、下記のようにするといいでしょう。

css
1/*====親要素a====*/
2/* a要素はそのまま */
3.main1{
4  position: sticky;
5  top: 60px;
6  z-index: 1;
7}
8/*====/親要素a====*/
9
10/*====親要素b====*/
11.main2{
12 background:pink;
13 z-index: 2;
14 /* 相対基準要素ではないが、z-indexを有効にさせるために、relativeをつける */
15 position: relative;
16}
17/*====/親要素b====*/

ただし、このやり方は、おそらく、ブラウザによって、挙動が変わってしまう可能性があるため、
もしモダンブラウザにて、意図した動きにならない時は、ブラウザをコメントにて教えてください。

追記：header要素内の、</div>が一つ足りないので、今の所影響はないとは思いますが、
一応、追加しておきましょう。（後々、何かの挙動に影響するかも）

投稿2019/06/18 07:54

編集2019/06/18 08:01

miyabi_pudding

総合スコア9528

goetai

2019/06/18 11:54

回答ありがとうございます！解決できました。また同じことがないようにz-indexについて勉強したいと思います。

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

重なった部分が使えなくなるということであれば pointer-events で

CSS
1.main1 {
2  pointer-events: none;
3}

https://developer.mozilla.org/ja/docs/Web/CSS/pointer-events

投稿2019/06/18 08:48

x_x

総合スコア13749

goetai

2019/06/18 11:55

回答ありがとうございます！解決できました。添付してくださったファイルで詳しく勉強したいと思います。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

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

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