Позиционирование div по середине экрана?

Question

[Nwton]

Необходимо сделать всплывающее окно по центру экрана. Размеры окна зависят от содержимого, т.е. width и height неизвестны.

Я сделал так:

<div class="pop_wrap">
	<div class="pop">test</div>
</div>

.pop_wrap{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: auto;
}

Теперь .pop в центре, но .pop_wrap покрывает собой всю страницу и воспользоваться кнопками или формами на странице невозможно, пока всплывающее окно будет открыто.

Я пробовал присвоить .pop_wrap z-index, например, -100 и .pop z-index 100, но это почему-то не работает.

Решение: pointer-events: none для .pop_wrap и pointer-events: all для .pop

Answer 1

[VisualIdeas]

.pop_wrap
установите pointer-events:none

Answer 2

[Евгений]

Возможно как-то так:
https://jsfiddle.net/q3vkf4a0/