How to count distance in dots slick slider?

Question

css

In general
, there is a slider, for the entire width of the page, then there is a container with content ( 1000px margin: 0 auto)
in the slider there is a navigation (dots dots), it needs to be placed on the right edge - according to the width of the container
it needs to be placed on top of the slider image, the navigation is displayed behind the slider, if you look in the inspector,
if you make margin-top: -150px, for example, then the picture overlaps the navigation, z-index does not help for some reason

, but if you position the navigation absolute, then I will not guess the indent from the right edge on different monitors, what would Navigation was on the edge of the container

I hope I clearly described the problem

how to solve it?

Answer 1

You don’t even need vw there, since the parent block with a slider spans the entire width of the screen. It is enough to calculate in percentage:

Answer 2

Negative margins are evil.
Make the violin better.