Андрей Токмаков

Может быть потому что вы убираете плавно (hide), а показываете резко, установив opacity: 1

У Вас размер блока указан в vh это и есть ваша зависимость. Меняется размер окна - меняется размер блока соответственно. Хотите что бы не менялся размер, указывайте абсолютные единицы, px например. А положение его не меняется, ну опять же смотря относительно чего.

Поменяйте 100% на 25% и будет чудо

display: flex;
flex-direction: column;
flex-wrap: wrap;

Честно, слабо понятно что Вы имеете ввиду, но, что если обернуть картинку блоком, которому указать высоту, а картинке поставить 100% высоту, не пробовали?

<div style="display: inline-block;">
    Блок 1
</div>
<div style="display: inline-block;">
    Блок 2
</div>

Вот так что ли?

stickyjs.com
Вместо тысячи fixed

Весь гугл по запросу canvas

Потому что у Вас у обертки не указана ширина и в итоге она просто тянется на всю возможную ширину

Как то так https://jsfiddle.net/zb7bdj3o/1/

А в чем собственно сложность? https://jsfiddle.net/xNPC/x407gbjs/

stickyjs.com

Для вложенных ни как, внутри прозрачного блока всё становится прозрачным и ни чего с этим не сделаешь. Остается только выноситься всё из этого блока и абсолютно позиционировать. Ну или же как написал Ankhena W использовать rgba цвета, вместо прозрачности