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

Question

我正在尝试将我的“.store”类放置在我的#linkplaceholder div 上方 10 像素处，并将我的“.lastseen”类放置在我的 #linkplaceholder div 下方 10 像素处。这可能吗？

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

目前我只是通过给 store 一个上边距百分比和 lastseen 下边距百分比来定位 '.store' 和 '.lastseen' 类，以便你看到我想要的想法。这些有时位于它们需要的一般区域，但在不同的设备上它们可能会很远。这就是为什么我需要将 store 准确定位在上方 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 无法完成类似的事情。查看我创建的thissn-p。

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