◆ opacity が 1 以外だと stacking context が作られる ◆ position と同じようになるので z-index 指定しないと後に来る要素が上のレイヤになる こういう HTML を用意します <!doctype html> <style> body { margin: 0; } header { position: sticky; background: #888; color: white; top: 0; height: 40px; } section { display: flex; } div { width: 50%; height: 200vh; padding: 10px; } div p { font-size: 30px; margin: 10px; background: #ffee99; } .left { opacity: .3; }
![opacity ってこんな動作だっけ? : (*x).b=z->a+y/c](https://cdn-ak-scissors.b.st-hatena.com/image/square/cae5e2053d058d0b5ba8def29796f94d2af87688/height=288;version=1;width=512/https%3A%2F%2Flivedoor.blogimg.jp%2Fnetomemo-techpc%2Fimgs%2F4%2F0%2F404096a0-s.png)