CODEWITHSUNDEEP
htmlcssposition
John Smith
John Smith

Reputation: 69

Relatively Positioning two elements to a fixed div

I am attempting to position my '.store' class 10px above my #linkplaceholder div and my '.lastseen' class 10px below my #linkplaceholder div. Is this possible?

I would imagine this could be done with position absolute & relative, but when I change my #linkplaceholder to position: absolute, it is no longer centered horizontally like it should be. Also, the #linkplaceholdering div's size needs to stay dynamic at 20% of the viewport like it is.

Currently I just have the '.store' and '.lastseen' classes positioned by giving store a top margin percentage and lastseen a bottom margin percentage in order for you to see the idea I'm going for. These are sometimes in the general area of where they need to be, but on different devices they can be way off. That's why I need store to be positioned exactly 10px above and last seen to be positioned exactly 10px below so this is fixed and always accurate.

JSFiddle showing my code: 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>

Upvotes: 0

Views: 78

Answers (1)

Leon Kunštek
Leon Kunštek

Reputation: 563

I would suggest using JavaScript since I don't think something like this can be accomplished just with CSS. Check out this snippet I created.

NOTE: I had to use 20px from the top of the div because if I used 10px the text would get inside the image.

Upvotes: 1

Related Questions