Question

基本上，我有一个页面，当您按下按钮时应该加载3 png。我遇到的问题是我有一张要覆盖在#background上的图像#heart。我尝试了不同的位置排列，但是即使在较低层上具有较高的z索引，它（#heart图像）也不会移动。它甚至不会向左移动：x px

对不起。我还很新。我对如何进行完全不了解。开发人员工具只是告诉我，它位于我希望它位于的图像div上方，这是代码：

#heart {
  	z-index: 99999;
  	left: 200px;
  	top: 100px;
  	height: 100px;
  	width: 100px;
    position: relative;
  	}

#background {
	width: 800px;
	margin: 0 auto;
	display: none;
	z-index: -10;
	position: relative;
}

<div class="action">
		<img id="heart" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561725918/virtual%20pet/l1.png"  alt="heart points image">

		<img id="background" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561670551/virtual%20pet/little-board.png" alt="pin board image">

		<div id="bennyNormal"></div>

</div>

Answer 1

要做到这一点，您将必须使用其他css属性，例如flex和background-image，并像这样更新HTML DOM：

#heart {
  height: 100px;
  width: 100px;
}

#background {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 800px;
  height: 500px;
  background-image: url("https://res.cloudinary.com/dytmcam8b/image/upload/v1561670551/virtual%20pet/little-board.png");
  background-size: cover;
  background-position: center;
  position: relative;
}

  <div class="action">
  <div id="background"> 
    <img id="heart" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561725918/virtual%20pet/l1.png"  alt="heart points image">
  </div>
</div>

Answer 2

当您给元素“ position：relative”时，它会保留它在文档流中的位置，因此，当您更改它在页面上的位置时，它的顶部：100px或其他值，它会移动，但不会腾出它腾出的空间文件。因此，没有任何东西可以取代它，而z-index也无济于事。

尝试一下：

 <div class="action">
    // Switch the two images in the document flow to make this             easier, although you can ignore that if you want.

    <img id="background" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561670551/virtual%20pet/little-board.png" alt="pin board image">

 <img id="heart" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561725918/virtual%20pet/l1.png"  alt="heart points image">


    <div id="bennyNormal"></div>

  </div>

因此，现在#heart不再位于文档流中的#background图像下方。 bennyNormal div仍然在#action div内的所有内容之上，但是因为#background图像位于第一位（具有相对位置（即使没有位置）），因此#background将在文档流中将div保持在页面下方。如果您还给#background display：block设置了一个功能，它将阻止div向上移动，如果出现问题的话。

然后：

 #heart {
z-index: 99999; <== this is irrelevant now. get rid of it.
left: 200px; <== change these to position over #background as you wish
top: 100px;
height: 100px;
width: 100px;
position: absolute; <== important bit.
}

#background {
width: 800px;
margin: 0 auto;
display: none;   <== You want it invisible? Should be block.
z-index: -10;  <= Same with this. Don't screw around with z-index if you can avoid it.
position: relative; <== This no longer matters, but you can still include it
 }

Answer 3

作为nitin9nair注释，将#heart {位置：绝对； }似乎足够

#heart {
    position: absolute;
    top:200px;
    left:320px;
  	}

<div class="action">

		<img id="heart" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561725918/virtual%20pet/l1.png"  alt="heart points image">
		<img id="background" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561670551/virtual%20pet/little-board.png" alt="pin board image">

		<div id="bennyNormal"></div>

</div>

当我想要覆盖其他图像时，我的图像似乎锁定在块显示中

3 个答案: