How to move images with relative positioning?

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

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> 

Answer 2

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 3

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!