如何将幻灯片选择器的圆点放在图像的顶部？

<div class="slider-container">
  <img src="image.jpg" alt="Image">
</div>

.slider-container {
  position: relative;
  height: 400px; /* 替换为图像的实际高度 */
}

<div class="slider-container">
  <img src="image.jpg" alt="Image">
  <ul class="slider-dots">
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

.slider-dots {
  position: absolute;
  top: 0;
}

.slider-dots li {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ccc;
  margin: 0 5px;
}