相对定位移动影像

时间:2018-11-15 02:59:55

标签: html css move absolute relative

我有一个网页,其中父div具有相对位置,所有文本均具有绝对位置。现在,我注意到我根本无法在图像周围移动。我该怎么办? http://jsfiddle.net/uchn0m5k/1/ 编辑:我希望图像位于文本的后面(就Z空间而言),但是由于我要添加更多图像,所以我不希望将其设置为背景图像:)

html:

list[rest][rest]

css:

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

任何帮助将不胜感激。谢谢

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分:1)

您尝试这样做吗?

.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>

答案 2 :(得分:1)

所以,我 认为 ,这就是您要的?我打开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;
}

希望这可以回答您的问题。如果没有,请告诉我,我很乐意尝试找出更好的解决方案!