I have made my own select button composed of the selected element the selection of options. When the button is clicked the selection of options is displayed/not displayed. I want to position the selection of options horizontally centred on the screen but vertically "attached" to the selected element (i.e. just below). I have managed to get the selection appear at the right place but it stays fixed relative to the screen instead of relative to the selected element.
It somehow the opposite of this.
Is there an easy way of doing this?
my HTML:
<body>
<div class="container">
<div class="button">
<div class="element"></div>
<div class="selection"></div>
</div>
</div>
</body>
CSS:
.button {
position: relative;
}
.selection {
position: fixed;
width: 100px;
left: calc((100% - 100px) / 2);
z-index: 99;
}
