如何相对定位移动图像？

Question

我有一个网页，我有相对定位的父div和所有具有绝对定位的文本。 我现在已经注意到我根本无法移动图像。 我该怎么办？

http://jsfiddle.net/uchn0m5k/1/

我希望图像背后（就Z空间而言）文本，但是因为我想添加更多图像，我不希望将其设置为背景图像:)

 .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

更新答案：

您可以查看此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

你试过这样做吗？

 .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

那么，我认为这就是你所要求的？ 我打开了CSS并基本上将z-index添加到“容器”，“img”和“左上角”元素，这些元素将骰子的图像移动到“左上角”容器后面。

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;
}

希望这能回答你的问题。 如果没有，请告诉我，我很乐意尝试找出更好的解决方案！