親要素でdisplay: noneを使わずに、position: absoluteの子要素を消したい

Question

前提・実現したいこと

表題の通りです。

子要素にposition: absoluteが設定されているものがある場合、親要素をheight: 0にして隠しても子要素が存在し続けます。これを、子要素のクラス等をいじることなく、消したいと考えています。

以下の例で、青背景をスクロールした下にあるオレンジの背景部分の要素を消したい。また、レイアウトからも消えてほしいです(スクロールバーが出てほしくない)。

https://jsfiddle.net/vxnqr47d/43/

親要素でdisplay: noneを使わない理由は、transitionを利用したいからです。
親要素はアコーディオンメニューで、引き出しのようなアニメーションを実現するためにはdisplay: noneでなくheight: 0 -> height: 100pxなどで行う必要があるためです。

該当のソースコード

https://jsfiddle.net/vxnqr47d/43/
の内容を書き下します。

<div class="of-auto">a
  <div class="content">
    <div class="innercontent">B</div>
    <div class="innercontent2">ｖ</div>
  </div>
</div>

.of-auto {
  position: fixed;
  left: 0;
  top:1em;
  overflow: auto;
  height: 200px;
  width: 200px;
  background-color: blue;
  color: white;
}

.content {
    overflow: hidden;
    height: 0;
    max-height: 0;
    margin: 0;
}

.innercontent {  
  background-color: red;
  height:600px;
}

.innercontent2 {  
  background-color: orange;
  height:100px;
  position : absolute;
  right:0;
}

試したこと

.contentにvisibility: hiddenを設定してもダメでした。
.contentにdisplay: noneを設定するとうまく消えますが、それではtransitionができないのでダメです。
.innercontent2からposition: absoluteを削除することで隠れることも確認済みです。

Comments

[k_fujimoto]

何をトリガーにして ".innercontent2" の背景色を消したいのでしょうか？

[退会済みユーザー]

k_fujimotoさん 背景を消したいのではなく、要素そのものを消したいのでした。記載を少し修正します。また、実際のトリガーはボタンクリックですが、トリガーからclassの書き換えまでの実施は問題ないので、静的にでも上記条件で消す方法を知りたい、ということです。

Answer 1

You may need is this.

selector{
  opacity: 0;
  pointer-events: none;
}

• https://developer.mozilla.org/ja/docs/Web/CSS/filter-function/opacity
• https://developer.mozilla.org/ja/docs/Web/CSS/pointer-events

Please try using them.

---

You don't need use display: none to show fadeout-effect.

Make it simple as you did.

<label for="tgl" id="tgl_l">Click me!</label>
<div class="of-auto">a
  <div class="content">
    <div class="innercontent">B</div>
    <input type="checkbox" id="tgl">
    <div class="innercontent2">ｖ</div>
  </div>
</div>

.of-auto {
  position: fixed;
  left: 0;
  top:1em;
  overflow: auto;
  height: 200px;
  width: 200px;
  background-color: blue;
  color: white;
}

.content {
    overflow: hidden;
    height: 0;
    max-height: 0;
    margin: 0;
}

.innercontent {  
  background-color: red;
  height:600px;
}
.innercontent2 {  
  background-color: orange;
  height:100px;
  position : absolute;
  right:0;
}

/*tgl part*/

#tgl_l{
  position: fixed;
  top: 230px;
  border-radius: 5px;
  border: 1px solid;
  padding: .5em;
}
#tgl{
  display: none;
}

/*main part*/

#tgl:checked +.innercontent2{
  opacity: 0;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* i think this is better than above

#tgl:checked +.innercontent2{
  animation: fadeOut .7s forwards;
}
@keyframes fadeOut{
  0%{
    pointer-events: none;
    overflow: hidden;
  }
  99.9%{
    opacity: 0;
  }
  100%{
    width: 0;
    height: 0;
  }
}

*/

main issue: why overflow: hidden; not working

Please write position: relative at a parent element if the child element has position: absolute. Otherwise, the origin of the element will be set to the parent's parent's parent's...parent element.

<div id="a">
  <div id="b">
    <div id="c">
    </div>
  </div>
</div>

#a{
  border: 1px solid;
  width: 300px;
  height: 300px;
}
#b{
  /*position: relative;*/
  width: 200px;
  height: 200px;
  background: skyblue;
}
#c{
  position: absolute;
  right: 0;
  width: 100px;
  height: 100px;
  background: palegreen;
}

Don't forget position: relative! lol

.content{
  position: relative;
}

Comments

[退会済みユーザー]

thank you.
but I don't want to change child element (that is .innercontent2).
And, I don't want to see scroll bar. (I'll update question body)

[liveasnotes]

> I don't want to change child element
Ah... I'll add about it. wait a moment.

[退会済みユーザー]

thank you God.
"position: relative" is just my wanted.
bestest answer.