如何将元素放在另一个元素的边框上？

Question

我正在做一个项目，试图制作一个以另一个（地面）为中心的（我们称之为湖），并且它的边缘周围有更小的元素，这些元素将是码头。停靠栏需要用户可点击，因此它必须是一个元素，而不仅仅是背景图片。

这就是我的想象（抱歉画的不好）：

如何使用 css 和 HTML 甚至使用 javascript/jquery 实现此结果？

.ground {
  width: 100%;
  height: 600px;
  border: 2px solid black;
  position: relative;
}

.lake {
  width: 60%;
  height: 60%;
  border: 2px solid black;
  border-radius: 200px;
  background: blue;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.dock {
  width: 30px;
  height: 50px;
  margin: 10px;
  background: black;
  float: right;
}

<div class="ground">
  <div class="lake">
    <div class="dock"></div>
    <div class="dock"></div>
    <div class="dock"></div>
    <div class="dock"></div>
  </div>
</div>

Answer 1

你可以这样做使用<ul> <li>调整你想要多少我已经完成示例代码的位置。

.ground {
  width: 100%;
  height: 600px;
  border: 2px solid black;
  position: relative;
}

.lake {
  width: 20%;
  height: 60%;
  border: 2px solid black;
  border-radius: 200px;
  background: blue;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

li {
  list-style-type: none;
}

li.dock {
  position: absolute;
  width: 30px;
  height: 50px;
  margin: 10px;
  background: black;
  float: right;
}

li:nth-child(1) {
  top: -2%;
  left: 30%;
}

li:nth-child(2) {
  left: -2%;
  top: 40%;
}

li:nth-child(3) {
  right: -2%;
  top: 40%;
}

li:nth-child(4) {
  left: 50%;
  bottom: -2%;
}

li:nth-child(5) {
  bottom: -2%;
  left: 30%;
}

li:nth-child(6) {
  bottom: 10%;
}

li:nth-child(7) {
  top: -2%;
  left: 50%;
}

<div class="ground">
  <ul class="lake">
    <li class="dock"></li>
    <li class="dock"></li>
    <li class="dock"></li>
    <li class="dock"></li>
    <li class="dock"></li>
    <li class="dock"></li>
    <li class="dock"></li>
  </ul>
</div>

Answer 2

您可以在 css 中使用 ':nth-child()' 或 ':nth-of-type()' 来定位停靠点并单独定位它们。这是一个例子：https://codepen.io/anon/pen/rqPere

.dock:nth-of-type(1) {
   left:auto;
   right:0;
   transform: translate(50%, -50%);
}

.dock:nth-of-type(2) {
  left:50%;
  top:0;
}

.dock:nth-of-type(3) {
  left:50%;
  top:100%;
}

Answer 3

根据需要调整码头的位置：

.ground {
  width: 100%;
  height: 90vh;
  min-height: 260px;
  border: 2px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lake {
  width: 80%;
  min-width:360px;
  height: 50%;
  min-height: 200px;
  border: 8px solid green;
  border-radius: 50%;
  background: blue;
  position: relative;
}

.dock {
  width: 30px;
  height: 50px;
  border: solid green 4px;
  background: black;
  position: absolute;
}

.dock.first {
  top: 20px;
  left: 20px;
}

.dock.second {
  top: 20px;
  right: 20px;
}

.dock.third {
  bottom: 40px;
  left: 0px;
}

.dock.fourth {
  bottom: 40px;
  right: 0px;
}

<div class="ground">
  <div class="lake">
    <div class="dock first"></div>
    <div class="dock second"></div>
    <div class="dock third"></div>
    <div class="dock fourth"></div>
  </div>
</div>