Position Absolute Issue

by incutonez

HTML

<div id="app">
  <button id="toggle">
    Toggle Menu
  </button>
  <div class="container">
    <div class="content" id="content">
      Content 1
    </div>
  </div>
  <div class="container">
    <input id="field">
    <div class="content" id="content">
      Content 1
    </div>
  </div>
</div>
<div class="absolute-container">
  <div id="menu1" class="child">
    Should Scroll as Content but show over parent's height
  </div>
</div>

CSS

#app {
  position: relative;
}

.container {
  height: 100px;
  /* If I take this off, I get the desired behavior */
  overflow: auto;
  position: relative;
}

.content {
  height: 1000px;
  width: 100%;
  color: white;
  background-color: darkblue;
}

.absolute-container {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  pointer-events: none;
}

.child {
  height: 100px;
  width: 200px;
  background-color: black;
  position: absolute;
  z-index: 10;
  display: none;
  color: white;
}

body, html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  overflow: auto;
}

JavaScript 1.7

let showing = false;

function updateShowing(show = !showing) {
  const rect = document.getElementById("field").getBoundingClientRect();
  if (show) {
  	let top = null;
    let bottom = null;
  	if (Math.round(Math.random())) {
    	top = `${rect.top - 100}px`;
    }
    else {
    	top = `${rect.bottom}px`;
    }
    console.log(top, bottom)
    document.getElementById("menu1").style.top = top;
    document.getElementById("menu1").style.bottom = bottom;
    document.getElementById("menu1").style.display = "block";
  } else {
    document.getElementById("menu1").style.display = "none";
  }
  showing = show;
}
document.getElementById("toggle").addEventListener("click", () => {
  updateShowing();
})