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

Question

我正在尝试将我的'.store'类定位在#linkplaceholder div上方10px，将'.lastseen'类定位在#linkplaceholder div下方10px。这可能吗？

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

[目前，我只是通过给store设置最高利润率百分比和lastseen最低利润率百分比来定位'.store'和'.lastseen'类，以便您了解我要的想法。有时，它们通常在需要放置的区域中，但是在不同的设备上，它们可能相距很远。这就是为什么我需要将商店定位在正好10像素以上，最后一次将存储定位在正好10像素以下，所以这是固定的，而且始终是准确的。

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>

我正在尝试将我的'.store'类定位在#linkplaceholder div上方10px，将'.lastseen'类定位在#linkplaceholder div下方10px。这可能吗？我想这可以做到...

Answer 1

我建议使用JavaScript，因为我认为仅靠CSS不可能完成类似的事情。查看我创建的this代码段。