时间戳

首页 > 解决方案 > 如何移动具有相对定位的图像？

html - 如何移动具有相对定位的图像？

问题描述

我有一个网页，其中有具有相对定位的父 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>

标签： htmlcsscss-positionmove

解决方案

你试过这样做吗？

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

推荐阅读