How to move images with relative positioning? - html

Question

I have a webpage where I have the parent div with relative positioning, and all text with absolute positioning. I have now noticed that I cannot move around the image at all. What should I do?
http://jsfiddle.net/uchn0m5k/1/
I want the image to be behind (in terms of Z Space) the text, but as I want to add more images, I do not wish to set it as the background image:)
.button {
background-color: #08aabe;
border: none;
color: #faead3;
padding: 0.2em 0.65em;
text-decoration: none;
font-size: 2.3vw;
margin-left: 5em;
letter-spacing: 0.02em;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
img {
max-width: 100%;
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.container {
position: relative;
height: 100vh;
}
/* Top left text */
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
.top-left h1 {
margin: 0px;
font-size: 4.5vw;
color: #08aabe;
margin-left: 2.5em;
padding-top: 3em;
padding-bottom: 0.2em;
}
body {
margin: 0px;
font-family: sans-serif;
background-color: black;
}
#squiggle {
right: 30vw;
}
<div class="container">
<img id="squiggle" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/280px-PNG_transparency_demonstration_1.png" style=" height:30%;">
<div class="top-left">
<h1>Lorem Ipsum.</h1>
<a class="button" href="#">Button to clcik</a>
</div>
</div>

Answer 1

Did you try to do like this?
.button {
background-color: #08aabe;
border: none;
color: #faead3;
padding: 0.2em 0.65em;
text-decoration: none;
font-size: 2.3vw;
margin-left: 2em;
letter-spacing: 0.02em;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
img{
max-width: 100%;
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.container {
position: relative;
height:100vh;
}
/* Top left text */
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
.top-left h1{
margin:0px;
font-size: 4.5vw;
color: #08aabe;
margin-left: 1em;
padding-top: 1em;
padding-bottom: 0.2em;
}
body{
margin: 0px;
font-family: sans-serif;
background-color:black;
}
#squiggle{
position:absolute;
left: 22vw;
top: 29px;
}
.container{
position:relative;
}
<div class="container">
<img id="squiggle" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/280px-PNG_transparency_demonstration_1.png" style=" height:30%;">
<div class="top-left">
<h1>Lorem Ipsum.</h1>
<a class="button"href="#">Button to clcik</a>
</div>
</div>

Answer 2

So, I think this is what you're asking for? I switched up the CSS and basically added z-indexes to the "container", "img" and "top-left" elements, which moved the image of the dice behind the "top-left" container.
img{
max-width: 100%;
position: absolute;
z-index: -2;
top: 120px;
left: 40px;
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.container {
position: relative;
height:100vh;
z-index: -3;
}
/* Top left text */
.top-left {
position: absolute;
top: 8px;
left: 16px;
z-index: -1;
}
Hope this answers your question. If not, please let me know and I'd be happy to try to figure out a better solution!

Answer 3

Updated Answer:
You can view this codepen.
body {
background: black;
font-family: sans-serif;
}
.logo {
position: absolute;
top: 5em;
left: 5em;
z-index: -1;
}
.logo-text {
position: absolute;
top: 4em;
left: 4em;
z-index: 1;
}
h1.logo-text {
color: #fff;
}
<div class="container">
<div class="logo">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/280px-PNG_transparency_demonstration_1.png">
</div>
<h1 class="logo-text">Lorem Ipsum</h1>
</div>