Co zrobić, aby przycisk zniknął jeśli strona jest przewinięta na górę

Question

<a id="button" href="#top1"></a>

#button {
	display: inline-block;
	background-color: rgb(31, 194, 126);
	width: 50px;
	height: 50px;
	text-align: center;
	border-radius: 4px;
	margin: 30px;
	position: fixed;
	bottom: 30px;
	right: 30px;
	transition: background-color .3s;
	z-index: 1000;1
  }
  #button:hover {
	cursor: pointer;
	background-color: #333;
  }
  #button:active {
	background-color: #555;
  }
  #button::after {
	content: "\f077";
	font-family: FontAwesome;
	font-weight: normal;
	font-style: normal;
	font-size: 2em;
	line-height: 50px;
	color: #fff;
  }

Co zrobić, aby przycisk zniknął jeśli strona jest przewinięta na górę bez używania jquery i js (jeśli jest taka możliwość)

Answer 1

Jedyny logiczny sposób, by to osiągnąć w czystym css, to sprawić, by element, który znajduje się na górze strony, zakrywał dany przycisk, by miał z-index wyższy od danego przycisku.

Na przykład w ten sposób:

https://codepen.io/frostify/pen/PoPXqdB