相对定位两个元素到一个固定的div

Question

我正在尝试将我的“.store”class 定位在我的#linkplaceholder div 上方 10px 和我的“.lastseen”class 10px 在我的#linkplaceholder [=30= 下方].这可能吗？

我想这可以通过绝对位置和相对位置来完成，但是当我将#linkplaceholder 更改为位置：绝对位置时，它不再像它应该的那样水平居中。此外，#linkplaceholdering div 的大小需要像现在一样在视口的 20% 处保持动态。

目前我只有'.store'和'.lastseen'classes通过给store一个最高保证金百分比和lastseen一个最低保证金百分比来定位，以便你看到我的想法去。这些有时位于它们需要的一般区域，但在不同的设备上它们可能会偏离。这就是为什么我需要商店正好位于上方 10px 并且最后看到的位置恰好位于下方 10px 所以这是固定的并且始终准确。

JSFiddle 显示我的代码：https://jsfiddle.net/1ms9fk63/

    body {
        background: black;
    }
    #container {
     background-color: black;
     z-index: 0;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
 }
 #linkplaceholder {
  margin: 0 auto;
  z-index: 10000000;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20%;
 }
 #linkplaceholder img {
  width: 100%;
 }
 .store {
  top: 0;
  margin-top: 21.5%;
 }
 .lastseen {
  bottom: 0;
  margin-bottom: 21.5%;
 }
 .lastseen, .store {
  position: absolute;
  width: 100%;
  text-align: center;
 }
 .lastseen a, .store a {
  font-family: neue-haas-grotesk-text, sans-serif;
  color: #ffffff;
  font-weight: 400;
  font-style: normal;
  list-style: none;
  text-align: center;
  text-decoration: none;
  font-size: 15px;
 }
 .lastseen a:hover, .store a:hover {
  text-decoration: underline;
 }

      <div id="container">
        <div id="linkplaceholder">
          <a href="/">
            <img src="images/image.svg" alt="" />
          </a>
        </div>
        <div id="navcontainer">
          <div class="store"><a href="/store">STORE</a></div>
          <div class="lastseen"><a href="/last-seen">LAST SEEN</a></div>
        </div>
      </div>

Answer 1

我建议使用 JavaScript，因为我不认为仅使用 CSS 就可以完成这样的事情。查看我创建的 this 片段。

注意： 我必须使用 div 顶部的 20px 因为如果我使用 10px 文本会进入图片。

相对定位两个元素到一个固定的div

Relatively Positioning two elements to a fixed div

html

css

position