I am currently working on creating a div that includes a small circle on the right side with an X inside it. Here is my progress so far:
https://i.sstatic.net/3r2Nl.png
Although the X is not yet placed inside the circle as intended, overall it looks good to me. One issue I encountered was needing to set the parent element's position to relative in order to achieve this layout.
All of the above code accomplishes this design structure:
<div id="pickedLingua">
<template id="productrow" >
<div style="position:relative;">
<table style="position:absolute; top:0; left:0;" class="lingsel">
<tr>
<td style="width: 33%">
<p>
@*content from js code*@
</p>
</td>
<td style="width: 33%">
<div class="containerthing">
<p class="small">
@*content from js code*@
</p>
</div>
</td>
<td style="width: 33%">
<div class="containerthing">
<p class="small">
@*content from js code*@
</p>
</div>
</td>
</tr>
</table>
<div style="position:absolute; top:0; right:0" class="circle">
<p style="color: white;">X</p>
</div>
</div>
</template>
</div>
However, when adding more templates to the list, they end up overlapping each other instead of being rendered below one another.
If I remove the positioning styles, the result looks like this:
https://i.sstatic.net/XSH2M.png
The X button no longer overlaps anything but sits directly underneath each line instead.
My goal is to have both the circle overlapping the item and each item rendering on top of each other. How can I accomplish this?