Мое изображение кажется заблокированным на дисплее блока, когда я хочу, чтобы оно перекрывало другое изображение

Question

В принципе, у меня есть страница, которая должна загружать 3 pngs при нажатии кнопки. У меня проблема в том, что у меня есть одно изображение #heart, которое я хочу наложить на #background. Я пробовал разные варианты позиционирования, но оно (изображение #heart) не будет двигаться вообще, даже с высоким z-индексом над нижним слоем. Он даже не сдвинется вправо с левой стороны: x px

Извините. Я все еще довольно новый. Я полностью застрял в том, как поступить. Инструменты разработчика просто говорят мне, что он находится на изображении выше, где я хочу, чтобы он был ... Вот код:

#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

Когда вы даете элементу "position: относительный", он сохраняет свое место в потоке документов, поэтому, когда вы изменяете его позицию на странице с верхом: 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 больше не находится «под» фоновым изображением в потоке документов. Элемент bennyNormal по-прежнему находится «над» всем внутри div #action, но потому что изображение #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 2

Как комментарий 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>

Answer 3

Чтобы сделать это, вам нужно будет использовать некоторые другие 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>