добавление кнопки поверх видео

Question

Я попробовал каждый пост там, чтобы получить это право и сдался. Я пытаюсь получить кнопку поверх видео. Я знаю, что это связано с CSS, и я не гений с этим. Может кто-нибудь сообщить мне, что я делаю неправильно с CSS?

введите описание изображения здесь

.video-background {
  background: #000;
  position: relative;
	top: 50%;
    left: 50%;
	height: 325px;
    min-height: 25rem;
	min-width: 100%;
    width: 100%;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1;
	overflow: hidden;
}	

	._pattern-overlay { 
		position: absolute;
		top: 0;
		width: 100%;
		opacity: 100;
		bottom: 0;
		background-image: url(styles/fusiongamer/xenforo/gridtile4x4.gif);
		z-index: 2;
	}
.discordbutton {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 12px 40px;
    border: 1px solid #133b68;
    border-radius: 8px;
    background: #236ec3;
    background: -webkit-gradient(linear, left top, left bottom, from(#236ec3), to(#133b68));
    background: -moz-linear-gradient(top, #236ec3, #133b68);
    background: linear-gradient(to bottom, #236ec3, #133b68);
    font: normal normal bold 20px arial;
    color: #ffffff;
    text-decoration: none;
}
.discordbutton:focus {
    border: 1px solid #16457a;
    background: #2a84ea;
    background: -webkit-gradient(linear, left top, left bottom, from(#2a84ea), to(#17477d));
    background: -moz-linear-gradient(top, #2a84ea, #17477d);
    background: linear-gradient(to bottom, #2a84ea, #17477d);
    color: #ffffff;
    text-decoration: none;
}
.discordbutton:active {
    background: #133b68;
    background: -webkit-gradient(linear, left top, left bottom, from(#133b68), to(#133b68));
    background: -moz-linear-gradient(top, #133b68, #133b68);
    background: linear-gradient(to bottom, #133b68, #133b68);
}

<div class="video-background">
	<div class="_pattern-overlay"></div>
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
	    <source src="styles/fusiongamer/xenforo/star_citizen.mp4" type="video/mp4">
	  </video>
</div>
<div class="button_cont" align="center">
<a class="discordbutton" href="https://discord.gg/e4ftHBZ">Join Us</a>
</div>

Answer 1

Вы можете сделать кнопку с помощью position: absolute, установить ее z-index, чтобы она была видна поверх видео, а затем расположить ее где угодно.

.video-background {
  background: #000;
  position: relative;
	top: 50%;
    left: 50%;
	height: 325px;
    min-height: 25rem;
	min-width: 100%;
    width: 100%;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1;
	overflow: hidden;
}	

	._pattern-overlay { 
		position: absolute;
		top: 0;
		width: 100%;
		opacity: 100;
		bottom: 0;
		background-image: url(styles/fusiongamer/xenforo/gridtile4x4.gif);
		z-index: 2;
	}
.discordbutton {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 12px 40px;
    border: 1px solid #133b68;
    border-radius: 8px;
    background: #236ec3;
    background: -webkit-gradient(linear, left top, left bottom, from(#236ec3), to(#133b68));
    background: -moz-linear-gradient(top, #236ec3, #133b68);
    background: linear-gradient(to bottom, #236ec3, #133b68);
    font: normal normal bold 20px arial;
    color: #ffffff;
    text-decoration: none;
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 1;
}
.discordbutton:focus {
    border: 1px solid #16457a;
    background: #2a84ea;
    background: -webkit-gradient(linear, left top, left bottom, from(#2a84ea), to(#17477d));
    background: -moz-linear-gradient(top, #2a84ea, #17477d);
    background: linear-gradient(to bottom, #2a84ea, #17477d);
    color: #ffffff;
    text-decoration: none;
}
.discordbutton:active {
    background: #133b68;
    background: -webkit-gradient(linear, left top, left bottom, from(#133b68), to(#133b68));
    background: -moz-linear-gradient(top, #133b68, #133b68);
    background: linear-gradient(to bottom, #133b68, #133b68);
}

<div class="video-background">
	<div class="_pattern-overlay"></div>
    <video playsinline="playsinline" autoplay="autoplay" muted="muted" 
    loop="loop">
	    <source src="styles/fusiongamer/xenforo/star_citizen.mp4" type="video/mp4">
	  </video>
      <a class="discordbutton" href="https://discord.gg/e4ftHBZ">Join Us</a>
</div>

На самом деле, в вашем случае это z-index требуется только потому, что вы установили z-index в .video-background.
И относительно позиционирования кнопку, я предлагаю вам ознакомиться с CSS позиционирования . Рассматривая ваш пример, будет лучше, если вы переместите кнопку внутри элемента .video-background, так как это с помощью position: relative - вы сможете легко установить смещения кнопки.