CSS - Make A Select Menu Float Above Other Content

Deatils

• How to make something flow above something else
• The field is open full time for now, but the use case is when it would be hidden until some action made it visible at which point it should appear above the other content

EXAMPLE

HTML

<div id="target-wrapper">
  <select size="5" id="target-select">
    <option value="alpha">Alpha</option>
    <option value="bravo">Bravo</option>
    <option value="charlie">Charlie</option>
    <option value="delta">Delta</option>
    <option value="echo">Echo</option>
    <option value="foxtrot">Foxtrot</option>
    <option value="golf">Golf</option>
    <option value="hotel">Hotel</option>
    <option value="india">India</option>
    <option value="juliett">Juliett</option>
    <option value="kilo">Kilo</option>
    <option value="lima">Lima</option>
    <option value="mike">Mike</option>
    <option value="november">November</option>
    <option value="oscar">Oscar</option>
    <option value="papa">Papa</option>
    <option value="quebec">Quebec</option>
    <option value="romeo">Romeo</option>
    <option value="sierra">Sierra</option>
    <option value="tango">Tango</option>
    <option value="uniform">Uniform</option>
    <option value="victor">Victor</option>
    <option value="whiskey">Whiskey</option>
    <option value="x-ray">X-ray</option>
    <option value="yankee">Yankee</option>
    <option value="zulu">Zulu</option>
  </select>
</div>
<div>
  This is the text that should be overwritten. This is the text that should be
  overwritten. This is the text that should be overwritten. This is the text
  that should be overwritten. This is the text that should be overwritten. This
  is the text that should be overwritten.
</div>

CSS

#target-wrapper {
  position: relative;
}

#target-select {
  position: absolute;
}

JavaScript

const kickoff = () => {
    console.log("kickoff")
}

document.addEventListener('DOMContentLoaded', kickoff)

References

• MDN: CSS position