Trouble having elements layered properly
I'm working on a project and I ran into this problem.
Simplified version of the code I'm using: https://codepen.io/chrispitts/pen/WNWpmWb?editors=1111
The pen shows exactly what I want the result to look like, however the issue with it is that the button isn't clickable. Essentially I want the layout order from top to bottom to be like this:
div.progress-circle
div.progress-circle::after
button
How would I do this while still being able to click on the button?
1 Reply
your button doesnt have a height because all the content is placed relative to it. (the button is not forced to grow in height)
but, you are also complicating it a bit to much imo. You can make the conic fill on the progress div itself, without a pseudo. here an example. no need for absolute positioned elements etc
https://codepen.io/MarkBoots/pen/qBwrwJv?editors=1111