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

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

您可以在css中使用'：nth-​​child（）'或'：nth-​​of-type（）'来定位底座并分别定位它们。这是一个示例：https://codepen.io/anon/pen/rqPere

        `android:excludeFromRecents="true"
        android:alwaysRetainTaskState="true"`

Answer 2

根据需要调整坞站的位置：

.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>

Answer 3

您可以使用<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>