Я пытаюсь помешать тексту прокручиваться за выпадающим мобильным меню. Я думал об использовании простого смещения от вершины, чтобы достигнуть этого, однако меню является динамическим и перемещается к различным размерам, так что это невозможно
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
#menu
{
height:200px;
width:100%;
background-color:#E03437;
position:relative;
}
#main{
height:800px;
width:100%;
overflow:scroll;
}
</style>
</head>
<body>
<div id="menu">MOBILE MENU DROP DOWN</div>
<div id="main">
<p>This a test text I dont want to be able to scroll behind the red mobile menu div above.</p>
<p> </p>
<p>a</p> <p>a</p> <p>a</p> <p> </p>
<p>a</p> <p>a</p> <p> </p>
<p>a</p> <p> </p>
<p>a</p> <p>a</p> <p> </p>
<p>a</p> <p>a</p> <p>a</p> <p> </p>
<p>a</p> <p>a</p> <p>a</p> <p>a</p>
<p>a</p> <p>a</p> <p>a</p> <p>a</p>
<p>a</p> <p>a</p> <p> </p>
</div>
</body>
</html>