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

我正在做一个项目，试图建造一个（让我们称之为湖泊）以另一个（地面）为中心，边缘有更小的元素，这些元素就是码头。码头需要由用户点击，所以它需要是一个元素，而不仅仅是一个背景图像

这就是我的想象（抱歉油漆太差）：

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

.ground{
宽度：100%；
高度：600px；
边框：2件纯黑；
位置：相对位置；
}
莱克先生{
宽度：60%；
身高：60%；
边框：2件纯黑；
边界半径：200px；
背景：蓝色；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.码头{
宽度：30px；
高度：50px；
利润率：10px；
背景：黑色；
浮动：对；
}

您可以在css中使用“：nth-child（）”或“：nth-of-type（）”以停靠点为目标并分别定位它们。下面是一个例子：

您可以在css中使用“：nth-child（）”或“：nth-of-type（）”以停靠站为目标并分别定位它们。下面是一个例子：

---

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

.ground{
宽度：100%；
高度：90vh；
最小高度：260px；
边框：2件纯黑；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
莱克先生{
宽度：80%；
最小宽度：360px；
身高：50%；
最小高度：200px；
边框：8px纯绿；
边界半径：50%；
背景：蓝色；
位置：相对位置；
}
.码头{
宽度：30px；
高度：50px；
边框：纯绿4px；
背景：黑色；
位置：绝对位置；
}
.码头，第一{
顶部：20px；
左：20px；
}
.dock.second{
顶部：20px；
右：20px；
}
1.码头3号{
底部：40px；
左：0px；
}
.码头，第四{
底部：40px；
右：0px；
}

---

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

.ground{
宽度：100%；
高度：90vh；
最小高度：260px；
边框：2件纯黑；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
莱克先生{
宽度：80%；
最小宽度：360px；
身高：50%；
最小高度：200px；
边框：8px纯绿；
边界半径：50%；
背景：蓝色；
位置：相对位置；
}
.码头{
宽度：30px；
高度：50px；
边框：纯绿4px；
背景：黑色；
位置：绝对位置；
}
.码头，第一{
顶部：20px；
左：20px；
}
.dock.second{
顶部：20px；
右：20px；
}
1.码头3号{
底部：40px；
左：0px；
}
.码头，第四{
底部：40px；
右：0px；
}

---

您可以使用

调整您想要的位置我已经完成了示例代码


.ground{
宽度：100%；
高度：600px；
边框：2件纯黑；
位置：相对位置；
}
莱克先生{
宽度：20%；
身高：60%；
边框：2件纯黑；
边界半径：200px；
背景：蓝色；
位置：相对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
李{
列表样式类型：无；
}
李·多克{
位置：绝对位置；
宽度：30px；
高度：50px；
利润率：10px；
背景：黑色；
浮动：对；
}
李：第n个孩子（1）{
前-2%；
左：30%；
}
李：第n个孩子（2）{
左-2%；
最高：40%；
}
李：第n个孩子（3）{
右-2%；
最高：40%；
}
李：第n个孩子（4）{
左：50%；
底部-2%；
}
李：第n个孩子（5）{
底部-2%；
左：30%；
}
李：第n个孩子（6）{
底部：10%；
}
李：第n个孩子（7）{
前-2%；
左：50%；
}










您可以使用
调整您想要的位置我已经完成了示例代码


.ground{
宽度：100%；
高度：600px；
边框：2件纯黑；
位置：相对位置；
}
莱克先生{
宽度：20%；
身高：60%；
边框：2件纯黑；
边界半径：200px；
背景：蓝色；
位置：相对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
李{
列表样式类型：无；
}
李·多克{
位置：绝对位置；
宽度：30px；
高度：50px；
利润率：10px；
背景：黑色；
浮动：对；
}
李：第n个孩子（1）{
前-2%；
左：30%；
}
李：第n个孩子（2）{
左-2%；
最高：40%；
}
李：第n个孩子（3）{
右-2%；
最高：40%；
}
李：第n个孩子（4）{
左：50%；
底部-2%；
}
李：第n个孩子（5）{
底部-2%；
左：30%；
}
李：第n个孩子（6）{
底部：10%；
}
李：第n个孩子（7）{
前-2%；
左：50%；
}










您当然可以用CSS来完成这项工作。可能需要绝对定位。相关的问答-如果不是重复的话，甚至更相关-你当然可以用CSS来完成。可能需要绝对定位。相关问答-如果不是重复的话更相关-谢谢你的回答，我可能会这样做。谢谢你的回答，我可能会这样做。
.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%;
}