Наличие тега <button>над элементом <div>

Question

Я попытался создать тег, который бы полностью покрывал элемент div, и при нажатии элемент кнопки исчезал.HTML:

Я пытался установить высоту и ширину на 100%, но это не полностью заполняет область ... как мне это исправить?

#startstorybutton {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 7.5vw;
  right: 20vw;
  z-index: 10;
  background-color: #f4511e;
  color: white;
  Font-size: 50px;
  font-style: italic;
  transition: all 0.6s;
  cursor: url(cursors/select.PNG), pointer;
}

#story {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Three_little_pigs_%28geograph_4633727%29.jpg/1200px-Three_little_pigs_%28geograph_4633727%29.jpg");
  background-size: 100%;
  height: 40%;
  width: 80%;
  margin: 0 auto;
}

<div id="story">
  <div>
    <p id="storytitle">The Three Little Pigs</p>

    <div>
      <p id="storybox"></p>
    </div>
    <div id="storybuttonsection">
      <button type="button" id="backbutton"><span>Go back</span></button>
      <p id="pagenumber">121212</p><button id="continuebutton"><span>Continue</span></button>
    </div>

  </div>
  <button type="button" id="startstorybutton">Start the story!</button>
</div>

Answer 1

Я не очень уверен в вашей структуре HTML.Но, как вы описали свою проблему, я создал для вас пример.

Вам не нужно вносить изменения в свой HTML, чтобы сделать его простым и понятным.

В сюжетном диве есть кнопка, которая будет абсолютно позиционирована, чтобы соответствовать всему диву.

Я добавил немного jQuery, чтобы показать, как это будет выглядеть.

$(function(){
  $("button.overlay").click(function(){
    $(this).hide();
  });
});

.story{
	width: 250px;
	height: 100px;
	border: 1px solid black;
	text-align:center;
	position: relative;
}

.overlay{
	position: absolute;
	top:0px;
	left:0px;
	height: 100%;
	width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="story">
	Here goes the story!
	<button class="overlay">read story button</button>
</div>

Answer 2

Вы должны расположить элемент кнопки поверх «скрытого элемента», если вы установите относительное положение основного элемента, то вы можете поместить абсолютный дочерний элемент над ним (top: 0; right: 0) с высотой и шириной до 100%.

Чтобы скрыть кнопку, проще всего добавить событие прослушивателя к кнопке, а затем скрыть его (или удалить) с помощью JavaScript.

#startstorybutton {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  background-color: #f4511e;
  color: white;
  Font-size: 50px;
  font-style: italic;
  transition: all 0.6s;
  cursor: url(cursors/select.PNG), pointer;
}

#story {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Three_little_pigs_%28geograph_4633727%29.jpg/1200px-Three_little_pigs_%28geograph_4633727%29.jpg");
  background-size: 100%;
  height: 40%;
  width: 80%;
  margin: 0 auto;
  position: relative;
}

<div id="story">
  <div>
    <p id="storytitle">The Three Little Pigs</p>

    <div>
      <p id="storybox"></p>
    </div>
    <div id="storybuttonsection">
      <button type="button" id="backbutton"><span>Go back</span></button>
      <p id="pagenumber">121212</p><button id="continuebutton"><span>Continue</span></button>
    </div>

  </div>
  <button type="button" id="startstorybutton" onclick="this.style.display = 'none'">Start the story!</button>
</div>