Question

这似乎很简单，但由于某种原因不能奏效。我需要Image 2作为翻转工作，并且在第一个中间但是在它的顶部。到目前为止我有这个：

＆＃13;

   super.processInput(inputData, playerId);

   // get the player paddle tied to the player socket
   let playerPaddle = this.world.queryObject({ playerId });
   if (playerPaddle) {
       if (inputData.input === 'up') {
           playerPaddle.position.y -= 5;
       } else if (inputData.input === 'down') {
           console.log('you are moving down');
           playerPaddle.position.y += 5;
       } else if (inputData.input === 'left') {
           console.log('you are moving left?');
           playerPaddle.position.x -= 5;
       } else if (inputData.input === 'right') {
           console.log('you are moving left?');
           playerPaddle.isMovingDown = true;
       }
   }

＆＃13;

.image1 {
z-index: 1;
top: 10vh;
width: 100%;
position: static;
}

.image2 {
z-index: 3;
margin-left: auto;
margin-right: auto;
padding; 4vh;
position: fixed;
}

＆＃13;

图像一显示正常但图像2显示在其下方或位于下方内容之上而不是图像顶部。我宁愿使用CSS来做这件事而不是JavaScript，但是当它翻转时，它真的找不到办法吗？

提前致谢。

编辑; 像这样： How It Should Look

Answer 1

这里看起来有一些问题。我认为这就是你要找的东西。

对于你的div，给它一个相对位置。然后，对于每个图像，给它们一个绝对位置。在那时，图像应该位于彼此的顶部，并且对于div而不是身体，定位将是绝对的。

离。

div {
  position: relative;
}

.img1 {
 position: absolute;
 z-index: 1;
}

.img2 {
 position: absolute;
 z-index: 2;
}

Answer 2

以下是：

.parent {
  max-width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image1 {
  max-width: 100%;
}

.image2 {
  position: absolute;
  margin: auto;
  max-width: 65%;
}

@media (min-width: 600px) {
  .image2 {
    max-width: 600px;
  }
}

body {
  margin: 0; /* cancel default 8px margin on SO */
}

* {
  box-sizing: border-box; /* make elements include paddings in width/height */
}

<div class="parent">
  <img class="image1" draggable="false" src="https://icdn2.digitaltrends.com/image/google-campus-hq-headquarters-home-offices-720x720.jpg?ver=1.jpg" alt="Alt Tag">

  <img class="image2" src="https://vignette.wikia.nocookie.net/logopedia/images/2/28/Google_2015.svg/revision/latest?cb=20170804092955" onmouseover="this.src='https://vignette.wikia.nocookie.net/logopedia/images/2/25/Google_2015_%28Black%29.svg/revision/latest?cb=20171130074159'"
    onmouseout="this.src='https://vignette.wikia.nocookie.net/logopedia/images/2/28/Google_2015.svg/revision/latest?cb=20170804092955'">
</div>

重要的部分是父亲position:relative和第二个孩子的position:absolute，其余的只是一些最大值，以确保它们在较窄的屏幕和一些居中（垂直和水平）上调整大小在父母身上。

更多指示：

不需要draggable="false"或position:static，因为它们是默认值。但他们并没有错。
你在这里也根本不需要z-index，因为任何项目都会在其前面的兄弟之上呈现，以防它们重叠（除非它们中的一个被定位（具有一组position值），除了static）而另一个不是，在这种情况下，定位的一个在顶部。

Answer 3

<div class="parent" style="background-image:url('https://icdn2.digitaltrends.com/image/google-campus-hq-headquarters-home-offices-720x720.jpg?ver=1.jpg');">
    <img class="image2" src="https://vignette.wikia.nocookie.net/logopedia/images/2/28/Google_2015.svg/revision/latest?cb=20170804092955" onmouseover="this.src='https://vignette.wikia.nocookie.net/logopedia/images/2/25/Google_2015_%28Black%29.svg/revision/latest?cb=20171130074159'"
onmouseout="this.src='https://vignette.wikia.nocookie.net/logopedia/images/2/28/Google_2015.svg/revision/latest?cb=20170804092955'">
</div>

您可以将图片添加为div的背景吗？

使用CSS将翻转图像叠加在一起

3 个答案: