Почему кнопка не работает в любом слое CSS? - PullRequest
Новая
       18

Почему кнопка не работает в любом слое CSS?

0 голосов
/ 22 октября 2018

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

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

#hero {
	background-image: url('https://picsum.photos/1900/1000');
	background-size: cover;
	background-position: top center;
	position: relative;
	top: 0;
	bottom: 0;
	height: 85vh;
	z-index: -10;
}

#hero-overlay {
	position: absolute;
	background-color: rgba(0,0,0,0.5);
	top: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
	z-index: -5;
}

#hero-title {
	text-align: center;
	position: relative;
	text-transform: uppercase;
}


h1, #impact, #through, #diversity {
	font-weight: 700;
	line-height: .5;
}

#hero-subtitle ul {
	margin: 1.5rem 0;
}


@media (min-width: 320px) {
	h1#impact {
		color: #ffffff;
		font-size: 3em;
	}

	h1#through {
		color: rgb(235,234,229, .36);
		font-size: 3.5em;
		
		/* Fix for Safari */
		-khtml-opacity: 0.36;
	}

	h1#diversity {
		color: rgb(240,78,35);
		font-size: 3em;
	}
	
	#hero-subtitle ul li {
		list-style: none;
		color: #ffffff;
		text-align: center;
		text-transform: none;
		display: block;
	}

	#hero-subtitle ul {
		padding: 0;
	}
	
	h1.display-4 {
		font-size: 1.5em;
	}
	
}

@media (min-width: 360px) {
	h1#impact {
		color: #ffffff;
		font-size: 3.5em;
	}

	h1#through {
		color: rgb(235,234,229, .36);
		font-size: 4em;
		
		/* Fix for Safari */
		-khtml-opacity: 0.36;		
	}

	h1#diversity {
		color: rgb(240,78,35);
		font-size: 3.5em;
	}
	
	#hero-subtitle ul li {
		list-style: none;
		color: #ffffff;
		text-align: center;
		text-transform: none;
		display: block;
	}

	#hero-subtitle ul {
		padding: 0;
	}
}


@media (min-width: 480px) {
	h1#impact {
		color: #ffffff;
		font-size: 4.5em;
	}

	h1#through {
		color: rgb(235,234,229, .36);
		font-size: 5em;
	}

	h1#diversity {
		color: rgb(240,78,35);
		font-size: 4.5em;
	}
	
	#hero-subtitle ul li {
		list-style: none;
		color: #ffffff;
		text-align: center;
		text-transform: none;
		display: inline;
	}
	
	#hero-subtitle li+li:before {
		content: '| ';
		color: #f04e23;
	}	

	#hero-subtitle ul {
		padding: 0;
	}
}

@media (min-width: 640px) {
	h1#impact {
		color: #ffffff;
		font-size: 5.5em;
	}

	h1#through {
		color: rgb(235,234,229, .36);
		font-size: 6.5em;
	}

	h1#diversity {
		color: rgb(240,78,35);
		font-size: 5.5em;
	}
	
	#hero-subtitle ul li {
		list-style: none;
		color: #ffffff;
		text-align: center;
		text-transform: none;
		display: inline;
	}
	
	#hero-subtitle li+li:before {
		content: '| ';
		color: #f04e23;
	}	

	#hero-subtitle ul {
		padding: 0;
	}
	
	#hero-title {
		margin-top: 3em;	
	}	
}

@media (min-width: 768px) {
	h1#impact {
		color: #ffffff;
		font-size: 6.5em;
	}

	h1#through {
		color: rgb(235,234,229, .36);
		font-size: 7.5em;
	}

	h1#diversity {
		color: rgb(240,78,35);
		font-size: 6.5em;
	}
	
	#hero-subtitle ul li {
		list-style: none;
		color: #ffffff;
		text-align: center;
		text-transform: none;
		display: inline;
		font-size: 1.3em;
	}
	
	#hero-subtitle li+li:before {
		content: '| ';
		color: #f04e23;
	}	

	#hero-subtitle ul {
		padding: 0;
	}

	#hero-title {
		margin-top: 3em;	
	}
	
	h1.display-4 {
		font-size: 2em;
	}	
}


@media (min-width: 992px) {
	h1#impact {
		color: #ffffff;
		font-size: 8em;
	}

	h1#through {
		color: rgb(235,234,229, .36);
		font-size: 9.5em;
	}

	h1#diversity {
		color: rgb(240,78,35);
		font-size: 8em;
	}

	#hero-subtitle ul li {
		list-style: none;
		color: #ffffff;
		text-align: center;
		text-transform: none;
		display: inline;
		font-size: 1.5em;
	}

	#hero-subtitle li+li:before {
		content: '| ';
		color: #f04e23;
	}	
	
}

.center {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.btn-top {
  z-index: 1000!important;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>

<!-- HTML here -->
<main role="main">
  <div id="hero">
    <div id="hero-overlay"></div>
    <div class="center" id="hero-title">
      <h1 id="impact">Title 1</h1>
      <h1 id="through">Title 2</h1>
      <h1 id="diversity">Title 3</h1>
      <div id="hero-subtitle">
        <ul>
          <li>Conference Name</li>
          <li>February 27-March 1</li>
          <li>City, ST</li>
        </ul>
      </div>
      <a class="btn btn-lg btn-primary btn-top" href="#">Register</a>
    </div>
  </div> 
</main>

Ответы [ 2 ]

0 голосов
/ 22 октября 2018

Изменение z-index на #hero на 1 должно решить проблему. 

#hero {
	background-image: url('https://picsum.photos/1900/1000');
	background-size: cover;
	background-position: top center;
	position: relative;
	top: 0;
	bottom: 0;
	height: 85vh;
	z-index: 1;
}

#hero-overlay {
	position: absolute;
	background-color: rgba(0,0,0,0.5);
	top: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
	z-index: -5;
}

#hero-title {
	text-align: center;
	position: relative;
	text-transform: uppercase;
}


h1, #impact, #through, #diversity {
	font-weight: 700;
	line-height: .5;
}

#hero-subtitle ul {
	margin: 1.5rem 0;
}


@media (min-width: 320px) {
	h1#impact {
		color: #ffffff;
		font-size: 3em;
	}

	h1#through {
		color: rgb(235,234,229, .36);
		font-size: 3.5em;
		
		/* Fix for Safari */
		-khtml-opacity: 0.36;
	}

	h1#diversity {
		color: rgb(240,78,35);
		font-size: 3em;
	}
	
	#hero-subtitle ul li {
		list-style: none;
		color: #ffffff;
		text-align: center;
		text-transform: none;
		display: block;
	}

	#hero-subtitle ul {
		padding: 0;
	}
	
	h1.display-4 {
		font-size: 1.5em;
	}
	
}

@media (min-width: 360px) {
	h1#impact {
		color: #ffffff;
		font-size: 3.5em;
	}

	h1#through {
		color: rgb(235,234,229, .36);
		font-size: 4em;
		
		/* Fix for Safari */
		-khtml-opacity: 0.36;		
	}

	h1#diversity {
		color: rgb(240,78,35);
		font-size: 3.5em;
	}
	
	#hero-subtitle ul li {
		list-style: none;
		color: #ffffff;
		text-align: center;
		text-transform: none;
		display: block;
	}

	#hero-subtitle ul {
		padding: 0;
	}
}


@media (min-width: 480px) {
	h1#impact {
		color: #ffffff;
		font-size: 4.5em;
	}

	h1#through {
		color: rgb(235,234,229, .36);
		font-size: 5em;
	}

	h1#diversity {
		color: rgb(240,78,35);
		font-size: 4.5em;
	}
	
	#hero-subtitle ul li {
		list-style: none;
		color: #ffffff;
		text-align: center;
		text-transform: none;
		display: inline;
	}
	
	#hero-subtitle li+li:before {
		content: '| ';
		color: #f04e23;
	}	

	#hero-subtitle ul {
		padding: 0;
	}
}

@media (min-width: 640px) {
	h1#impact {
		color: #ffffff;
		font-size: 5.5em;
	}

	h1#through {
		color: rgb(235,234,229, .36);
		font-size: 6.5em;
	}

	h1#diversity {
		color: rgb(240,78,35);
		font-size: 5.5em;
	}
	
	#hero-subtitle ul li {
		list-style: none;
		color: #ffffff;
		text-align: center;
		text-transform: none;
		display: inline;
	}
	
	#hero-subtitle li+li:before {
		content: '| ';
		color: #f04e23;
	}	

	#hero-subtitle ul {
		padding: 0;
	}
	
	#hero-title {
		margin-top: 3em;	
	}	
}

@media (min-width: 768px) {
	h1#impact {
		color: #ffffff;
		font-size: 6.5em;
	}

	h1#through {
		color: rgb(235,234,229, .36);
		font-size: 7.5em;
	}

	h1#diversity {
		color: rgb(240,78,35);
		font-size: 6.5em;
	}
	
	#hero-subtitle ul li {
		list-style: none;
		color: #ffffff;
		text-align: center;
		text-transform: none;
		display: inline;
		font-size: 1.3em;
	}
	
	#hero-subtitle li+li:before {
		content: '| ';
		color: #f04e23;
	}	

	#hero-subtitle ul {
		padding: 0;
	}

	#hero-title {
		margin-top: 3em;	
	}
	
	h1.display-4 {
		font-size: 2em;
	}	
}


@media (min-width: 992px) {
	h1#impact {
		color: #ffffff;
		font-size: 8em;
	}

	h1#through {
		color: rgb(235,234,229, .36);
		font-size: 9.5em;
	}

	h1#diversity {
		color: rgb(240,78,35);
		font-size: 8em;
	}

	#hero-subtitle ul li {
		list-style: none;
		color: #ffffff;
		text-align: center;
		text-transform: none;
		display: inline;
		font-size: 1.5em;
	}

	#hero-subtitle li+li:before {
		content: '| ';
		color: #f04e23;
	}	
	
}

.center {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.btn-top {
  z-index: 1000!important;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>

<!-- HTML here -->
<main role="main">
  <div id="hero">
    <div id="hero-overlay"></div>
    <div class="center" id="hero-title">
      <h1 id="impact">Title 1</h1>
      <h1 id="through">Title 2</h1>
      <h1 id="diversity">Title 3</h1>
      <div id="hero-subtitle">
        <ul>
          <li>Conference Name</li>
          <li>February 27-March 1</li>
          <li>City, ST</li>
        </ul>
      </div>
      <a class="btn btn-lg btn-primary btn-top" href="#">Register</a>
    </div>
  </div> 
</main>
0 голосов
/ 22 октября 2018

Ваш элемент #hero имеет z-index: -10;, эффективно размещая его под страницей, и кнопка перестает отвечать на запросы.Установка его в ноль исправляет это.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...