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

Question

我试图将我的".store"类定位在我的 #linkplaceholderdiv上方10px，将我的".lastseen"类定位在我的 #linkplaceholderdiv以下10px。这可能吗？

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

目前，我只是通过给商店一个最高边距百分比来定位".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来完成。看看我创建的这个片段。

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