Относительно позиционированный элемент относительно ближайшего позиционированного предка. Что я не могу найти в документации, так это то, почему, когда для этого родителя установлено значение переполнения, отличное от "visible", это, по-видимому, влияет на позиционирование его относительного позиционированного дочернего элемента.
Я воспроизвел это здесь, попробуйте раскомментировать строку 12:
html {
/* this is required to reproduce the issue */
overflow-y: auto;
}
body {
background-color: hotpink;
position: relative;
margin: 10px;
/* UNCOMMENT LINE 12 AND #APP WILL DISAPPEAR. WHY? */
/* overflow-y: auto; */
}
#app {
position: absolute;
background-color: black;
left: 0;
top: 0;
width: calc(100vw - 20px);
height: calc(100vh - 20px);
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app">
Uncomment line #12 and I will disappear. Why?
</div>
<script src="src/index.js"></script>
</body>
</html>
Вот точно такой же фрагмент, но с повторно включенной строкой 12:
html {
/* this is required to reproduce the issue */
overflow-y: auto;
}
body {
background-color: hotpink;
position: relative;
margin: 10px;
/* UNCOMMENT LINE 12 AND #APP WILL DISAPPEAR. WHY? */
overflow-y: auto;
}
#app {
position: absolute;
background-color: black;
left: 0;
top: 0;
width: calc(100vw - 20px);
height: calc(100vh - 20px);
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app">
Uncomment line #12 and I will disappear. Why?
</div>
<script src="src/index.js"></script>
</body>
</html>
Вот песочница кода, с которой вы можете поиграть: https://codesandbox.io/s/falling-cherry-pce0t?file= / src / styles. css
И я создал здесь запись экрана: https://app.usebubbles.com/dtb9vyNadHq8eMm2YsbfAQ/comments-on-codesandbox-io/
Я знаю, что закрепленный позиционированный элемент прикрепляется к ближайшему предку с помощью механизма прокрутки, который определяется как элемент с переполнением, установленным на значение, отличное от "visible". Интересно, связано ли это каким-то образом.
Почему настройка переполнения на позиционированном предке влияет на его относительное позиционирование дочернего элемента? Т.е. почему #app исчезает в приведенном выше фрагменте при повторном включении строки 12?