CSS-HTML如何使锚定图像转到特定点

我希望所有的锚图片在不同的角落，例如，左上角，右上角，右下角，右下角，和一个在中心谢谢你

我如何使我所有的锚链接/图片都指向特定的方面我希望团队在左上角我希望商店在右上角赞助商在左下角关于我们在右下角我认为我做了所有正确的代码，但他们不知道在那些特定的位置如何

如果有人能帮忙，我们将不胜感激

代码

Css

Html

提前谢谢。

html

<link rel="stylesheet" href="main.css" media="screen" title="no title" charset="utf-8">

---

在你的代码中，图像在各个角落等等。我不知道你在问什么。你想让下面的图片有一些链接吗？当我在chrome中打开它时，我所有的图片都保持对齐，它们不在所有角落。为了更好地进行测试，我将你的代码移动到

jsfiddle

，好的，请看这个并告诉我们你到底有什么问题？我看到你所有的图片都在角落里。你想在一张图片上有多个链接吗？我知道图片很小，我会解决这个问题，当图片在正确的角落里时，我觉得很傻，哈哈，我确实有那个代码，但我的朋友说它不对

<div class="section-links">
  <a href="teams.html" class="top-left">
    <img style="width: 100px;" src="icon1.jpg" alt="">
  </a>
  <a href="teams.html" class="top-right">
    <img style="width: 100px;" src="icon2.jpg" alt="">
  </a>
  <a href="teams.html" class="bottom-left">
    <img style="width: 100px;" src="icon4.jpg" alt="">
  </a>
  <a href="teams.html" class="bottom-right">
    <img style="width: 100px;" src="icon3.jpg" alt="">
  </a>
</div>

<link rel="stylesheet" href="main.css" media="screen" title="no title" charset="utf-8">

.section-links {
  position: relative;
  height: 500px;
  background-color: #c3c3c3 ;
}

.top-left {
  top: 10px; left: 10px;
  position: absolute;
}

.top-right {
  position: absolute;
  top: 10px; right: 10px;
}
.bottom-left {
 position: absolute;
 bottom: 10px; left: 10px;
}
.bottom-right {
  position: absolute;
  bottom: 10px; right: 10px;
}