Попап как в Пинтерест?

Question

[Чёкатилло]

Такой вот вопрос )

Спасибо!!!!

Answer 1

[Сергей]

если у родительского задано позиционирование, то дочерний будет считаться исходя из положения родителя,
с z-index максимум можно использовать значение -1
что мешает разместить блоки соседями с общим родителем?

UPD:
если я все правильно понял...
никаких fixed и никаких z-index
https://jsfiddle.net/s9hvuj9L/

UPD2:
немного переделал, убрал ссылку с крестиком, реализовав ее на CSS + добавил крестику fixed позиционирование
и подправил скрипты
https://jsfiddle.net/moLw0qef/1/

Comments

[Чёкатилло]

Это окно попап и мне хочется сделать его точно таким же, как в Пинтерест, а там какой-то секрет с этим вопросом Есть нюансы Например, в Пинтерест скроллбар попап постов находится на привычном месте с краю окна браузера, а не в попап При этом, попап скроллица целиком блоком, а не только содержание...и попап не перекрывает свой фон, при клике на который попап закрывается не только крестиком...https://ru.pinterest.com/

[Чёкатилло]

ну и у меня возник один вариант...и я задался его решением, но кажется с позиционированием я пролетаю, так как попап в положении фиксед вообще А хочу растянуть попап на всю страницу браузера и занести его за тот самый фон, при клике на который закрывается попап, а контент попап застилизовать типа под окно Ну как-то так через жопу ))

[Сергей]

Дмитрий: кажется я понял что тебе надо, сейчас фиддл сделаю

[Чёкатилло]

void01: второе это то что нужно Ты гений! Спасибо )

[Сергей]

Дмитрий: нет, скрипт только показывает и скрывает попап, фишка в position:absolute + top:0 left:0 right:0 bottom:0 =)) внутренний див в принципе тоже можно было бы спозиционировать абсолютно, но имхо это был бы уже перебор

[Сергей]

Дмитрий: в последней версии две лишних строчки в коде ( убрал в https://jsfiddle.net/moLw0qef/2/ ) не за что =))

Answer 2

[shell1989]

дочерний будет считаться исходя из положения родителя, если у родительского задано позиционирование