I have a Dropdown displaying a ListBox. The ListBox is basically an unordered list. Depending in the number of options to select, the height of the ListBox varies. Outside of the ListBox, but always at its bottom (which can be in different positions, depending on its height), I want to show an optional additional text. However, this text is not positionable outside of the wrappend <ul> which I do not understand. I thought if I position something as absolute, I am able to move it everywhere?
.list-containter {
margin: 0;
z-index: 99;
list-style: none;
background-color: hotpink;
max-height: 100px;
width: 200px;
border-color: green;
white-space: nowrap;
overflow-y: auto !important;
position: absolute;
top: 50px;
}
.extra-text {
position: absolute;
left: 10px;
top: 150px;
background-color: yellow;
}<ul class='list-containter'>
<li>Lorem Ipsum Text</li>
<li>Lorem Ipsum Text</li>
<li>Lorem Ipsum Text</li>
<li>Lorem Ipsum Text</li>
<p class='extra-text'>Some extra text that I want to show on certain conditions</p>
</ul>