Я пытаюсь расположить мой класс .store на 10 пикселей выше моего #linkplaceholder div, а мой класс .lastseen на 10px ниже моего #linkplaceholder div. Это возможно?
Я бы предположил, что это можно сделать с помощью абсолютного и относительного положения, но когда я изменяю #linkplaceholder на положение: абсолютное, он больше не центрируется по горизонтали, как должно быть. Кроме того, размер #linkplaceholdering div должен оставаться динамическим c в 20% области просмотра, как есть.
В настоящее время я просто располагаю классы '.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>