当我希望它覆盖另一个图像时，我的图像似乎锁定在块显示中答案

【问题标题】：My image seems locked into a block display when I want it to overlay another image当我希望它覆盖另一个图像时，我的图像似乎锁定在块显示中
【发布时间】：2019-06-29 03:55:07
【问题描述】：

基本上，当您按下按钮时，我有一个页面应该加载 3 个 png。我遇到的问题是我有一个图像#heart，我想将它叠加到#background 上。我尝试了不同的定位排列，但它（#heart 图像）根本不会移动，即使下层的 z-index 很高。它甚至不会向左移动：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>

【问题讨论】：

制作#heart { position: absolute; }

标签： javascript html css css-position z-index

【解决方案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>

【讨论】：

【解决方案2】：

当你给一个元素“位置：相对”，它保持它在文档流中的位置，所以当你改变它在页面上的位置时，顶部：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
 }

【讨论】：

【解决方案3】：

作为 nitin9nair 评论，设置 #heart { position: absolute; } 似乎足够了

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

【讨论】：