не может применить css свойство z-index к элементам - PullRequest
Новая
       0

не может применить css свойство z-index к элементам

0 голосов
/ 07 марта 2020

Я пытаюсь создать нижний колонтитул с анимацией. Но когда я помещаю анимацию в нижний колонтитул, другие элементы нижнего колонтитула, такие как кнопка и значки социальных сетей, становятся недоступными для нажатия. Я думаю, что анимация идет поверх элементов, поэтому я не могу щелкнуть другие элементы нижнего колонтитула. Я пытался изменить значения и использовать z-index свойство css, но оно не работает. Пожалуйста, посмотрите на мой код ниже: 

/* Main Footer */
footer .main-footer{	padding: 20px 0; z-index: 1;}
footer ul{	padding-left: 0;	list-style: none;}

/* Copy Right Footer */
.footer-copyright {	background: #222;	padding: 5px 0;}
.footer-copyright .logo {    display: inherit;}
.footer-copyright nav {    float: right;    margin-top: 5px;}
.footer-copyright nav ul {	list-style: none;	margin: 0;	padding: 0;}
.footer-copyright nav ul li {	border-left: 1px solid #505050;	display: inline-block;	line-height: 12px;	margin: 0;	padding: 0 8px;}
.footer-copyright nav ul li a{	color: #969696;}
.footer-copyright nav ul li:first-child {	border: medium none;	padding-left: 0;}
.footer-copyright p {	color: #969696;	margin: 2px 0 0;}

/* Footer Top */
.footer-top{	padding-bottom: 30px;	margin-bottom: 30px;	border-bottom: 3px solid #222;}

/* Footer transparent */
footer.transparent .footer-top, footer.transparent .main-footer{	background: transparent;}
footer.transparent .footer-copyright{	background: none repeat scroll 0 0 rgba(0, 0, 0, 0.3) ;}

/* Footer light */
footer.light .footer-top{	background: #f9f9f9;}
footer.light .main-footer{	background: #f9f9f9;}
footer.light .footer-copyright{	background: none repeat scroll 0 0 rgba(255, 255, 255, 0.3) ;}

/* Footer 4 */
.footer- .logo {    display: inline-block;}

/*==================== 
	Widgets 
====================== */
.widget{	padding: 20px;	margin-bottom: 40px;}
.widget.widget-last{	margin-bottom: 0px;}
.widget.no-box{	padding: 0;	background-color: transparent;	margin-bottom: 40px;
	box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none;}
.widget.subscribe p{	margin-bottom: 18px;}
.widget li a{	color: #de6b28;}
.widget li a:hover{	color: #233B66;}
.widget-title {margin-bottom: 20px;}
.widget-title span {background: #839FAD none repeat scroll 0 0;display: block; height: 1px;margin-top: 25px;position: relative;width: 20%;}
.widget-title span::after {background: inherit;content: "";height: inherit;    position: absolute;top: -4px;width: 50%;}
.widget-title.text-center span,.widget-title.text-center span::after {margin-left: auto;margin-right:auto;left: 0;right: 0;}
.widget .badge{	float: right;	background: #7f7f7f;}

.typo-light h1, 
.typo-light h2, 
.typo-light h3, 
.typo-light h4, 
.typo-light h5, 
.typo-light h5,
.typo-light p,
.typo-light div,
.typo-light span,
.typo-light small{	color: #fff;}
.footer-top {
  margin-top: .5em;}
ul.social-footer2 {	margin: 0;padding: 0;	width: auto;}
ul.social-footer2 li {display: inline-block;padding: 0;}
ul.social-footer2 li a:hover {background-color:#de6b28;}
ul.social-footer2 li a {display: block;	height:30px;width: 30px;text-align: center; z-index: 2;}
.btn{background-color: #de6b28; color:#fff; z-index: 2;}
.btn:hover, .btn:focus, .btn.active {background: #233B66;color: #fff;
-webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
-webkit-transition: all 250ms ease-in-out 0s;
-moz-transition: all 250ms ease-in-out 0s;
-ms-transition: all 250ms ease-in-out 0s;
-o-transition: all 250ms ease-in-out 0s;
transition: all 250ms ease-in-out 0s;}

/* Animations */
.area{
    background: #252525;  
    background: -webkit-linear-gradient(to left, #de6b28, #de6b28);  
    width: 100%;
    position: relative;}
.circles{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	overflow: hidden;}
.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: #de6b28;
    animation: animate 25s linear infinite;
    bottom: -150px;
}
.circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}
.circles li:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}
.circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}
.circles li:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}
.circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}
.circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}
.circles li:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}
.circles li:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}
.circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;}
@keyframes animate {
    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
		border-radius: 0;
		z-index: -1; }
    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
		border-radius: 50%;
		z-index: -1; }}
<footer id="footer" class="footer-1 area">
  <div class="main-footer widgets-dark typo-light">
  <div class="container">
  <div class="row">
  <div class="col-xs-12 col-sm-6 col-md-4">
  <div class="widget subscribe no-box">
  <h5 class="widget-title"><img src="assets/images/logo.png" width="50" height="40" alt="LOGO" > XXXXXXX<span></span></h5>
  <p>AD 216, SALT LAKE SECTOR 1</p>
  <p>KOLKATA - 700064</p>
  </div>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 footer-top">
  <div class="widget no-box">
  <h5 class="widget-title">Get Started<span></span></h5>
  <p>SEND IN A QUERY</p>
  <a class="btn" #myModal (click)="openModal()">Register Now</a>
  </div> </div>
  <div class="col-xs-12 col-sm-6 col-md-4 footer-top"> 
  <div class="widget no-box">
  <h5 class="widget-title">Contact Us<span></span></h5>
  <p><a href="mailto:xx@yy.buzz" title="glorythemes">support@xx.buzz</a></p>
  <ul class="social-footer2">
  <li class=""><a href="#" target="_blank" title="Facebook"><img alt="Facebook" width="30" height="30" src="data:image/png;base64,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"></a></li>
  <li class=""><a href="https://twitter.com" target="_blank" title="Twitter"><img alt="Twitter" width="30" height="30" src="data:image/png;base64,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"></a></li>
  <li class=""><a title="instagram" target="_blank" href="#"><img alt="instagram" width="30" height="30" src="data:image/png;base64,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"></a></li>
  <li class=""><a title="linkedin" target="_blank" href="#"><img alt="linkedin" width="30" height="30" src="data:image/png;base64,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"></a></li>
  </ul> </div></div></div></div></div>
  <div class="footer-copyright">
  <div class="container">
  <div class="row">
  <div class="col-md-12 text-center">
  <p>Copyright © 2020. All rights reserved.</p></div>
  </div>
  </div>
  </div>
  <ul class="circles">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul></footer>

Ответы [ 2 ]

1 голос
/ 07 марта 2020

Одним из решений вашей проблемы было бы добавление ul.circles{pointer-events:none} к css. 

/* Main Footer */
footer .main-footer{	padding: 20px 0; z-index: 1;}
footer ul{	padding-left: 0;	list-style: none;}

/* Copy Right Footer */
.footer-copyright {	background: #222;	padding: 5px 0;}
.footer-copyright .logo {    display: inherit;}
.footer-copyright nav {    float: right;    margin-top: 5px;}
.footer-copyright nav ul {	list-style: none;	margin: 0;	padding: 0;}
.footer-copyright nav ul li {	border-left: 1px solid #505050;	display: inline-block;	line-height: 12px;	margin: 0;	padding: 0 8px;}
.footer-copyright nav ul li a{	color: #969696;}
.footer-copyright nav ul li:first-child {	border: medium none;	padding-left: 0;}
.footer-copyright p {	color: #969696;	margin: 2px 0 0;}

/* Footer Top */
.footer-top{	padding-bottom: 30px;	margin-bottom: 30px;	border-bottom: 3px solid #222;}

/* Footer transparent */
footer.transparent .footer-top, footer.transparent .main-footer{	background: transparent;}
footer.transparent .footer-copyright{	background: none repeat scroll 0 0 rgba(0, 0, 0, 0.3) ;}

/* Footer light */
footer.light .footer-top{	background: #f9f9f9;}
footer.light .main-footer{	background: #f9f9f9;}
footer.light .footer-copyright{	background: none repeat scroll 0 0 rgba(255, 255, 255, 0.3) ;}

/* Footer 4 */
.footer- .logo {    display: inline-block;}

/*==================== 
	Widgets 
====================== */
.widget{	padding: 20px;	margin-bottom: 40px;}
.widget.widget-last{	margin-bottom: 0px;}
.widget.no-box{	padding: 0;	background-color: transparent;	margin-bottom: 40px;
	box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none;}
.widget.subscribe p{	margin-bottom: 18px;}
.widget li a{	color: #de6b28;}
.widget li a:hover{	color: #233B66;}
.widget-title {margin-bottom: 20px;}
.widget-title span {background: #839FAD none repeat scroll 0 0;display: block; height: 1px;margin-top: 25px;position: relative;width: 20%;}
.widget-title span::after {background: inherit;content: "";height: inherit;    position: absolute;top: -4px;width: 50%;}
.widget-title.text-center span,.widget-title.text-center span::after {margin-left: auto;margin-right:auto;left: 0;right: 0;}
.widget .badge{	float: right;	background: #7f7f7f;}

.typo-light h1, 
.typo-light h2, 
.typo-light h3, 
.typo-light h4, 
.typo-light h5, 
.typo-light h5,
.typo-light p,
.typo-light div,
.typo-light span,
.typo-light small{	color: #fff;}
.footer-top {
  margin-top: .5em;}
ul.social-footer2 {	margin: 0;padding: 0;	width: auto;}
ul.social-footer2 li {display: inline-block;padding: 0;}
ul.social-footer2 li a:hover {background-color:#de6b28;}
ul.social-footer2 li a {display: block;	height:30px;width: 30px;text-align: center; z-index: 2;}
.btn{background-color: #de6b28; color:#fff; z-index: 2;}
.btn:hover, .btn:focus, .btn.active {background: #233B66;color: #fff;
-webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
-webkit-transition: all 250ms ease-in-out 0s;
-moz-transition: all 250ms ease-in-out 0s;
-ms-transition: all 250ms ease-in-out 0s;
-o-transition: all 250ms ease-in-out 0s;
transition: all 250ms ease-in-out 0s;}

/* Animations */
.area{
    background: #252525;  
    background: -webkit-linear-gradient(to left, #de6b28, #de6b28);  
    width: 100%;
    position: relative;}
.circles{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	overflow: hidden;}
.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: #f00;
    animation: animate 25s linear infinite;
    bottom: -150px;
}
.circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}
.circles li:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}
.circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}
.circles li:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}
.circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}
.circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}
.circles li:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}
.circles li:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}
.circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;}
@keyframes animate {
    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
		border-radius: 0;
		 }
    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
		border-radius: 50%;
		}}


ul.circles{pointer-events:none}
<footer id="footer" class="footer-1 area">
  <div class="main-footer widgets-dark typo-light">
  <div class="container">
  <div class="row">
  <div class="col-xs-12 col-sm-6 col-md-4">
  <div class="widget subscribe no-box">
  <h5 class="widget-title"><img src="assets/images/logo.png" width="50" height="40" alt="LOGO" > XXXXXXX<span></span></h5>
  <p>AD 216, SALT LAKE SECTOR 1</p>
  <p>KOLKATA - 700064</p>
  </div>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 footer-top">
  <div class="widget no-box">
  <h5 class="widget-title">Get Started<span></span></h5>
  <p>SEND IN A QUERY</p>
  <a class="btn" #myModal (click)="openModal()">Register Now</a>
  </div> </div>
  <div class="col-xs-12 col-sm-6 col-md-4 footer-top"> 
  <div class="widget no-box">
  <h5 class="widget-title">Contact Us<span></span></h5>
  <p><a href="mailto:xx@yy.buzz" title="glorythemes">support@xx.buzz</a></p>
  <ul class="social-footer2">
  <li>
    <a href="#" target="_blank" title="Facebook"><img alt="Facebook" width="30" height="30" src="data:image/png;base64,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"></a></li>
  <li class=""><a href="https://twitter.com" target="_blank" title="Twitter"><img alt="Twitter" width="30" height="30" src="data:image/png;base64,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"></a></li>
  <li class=""><a title="instagram" target="_blank" href="#"><img alt="instagram" width="30" height="30" src="data:image/png;base64,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"></a></li>
  <li class=""><a title="linkedin" target="_blank" href="#"><img alt="linkedin" width="30" height="30" src="data:image/png;base64,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"></a></li>
  </ul> </div></div></div></div></div>
  <div class="footer-copyright">
  <div class="container">
  <div class="row">
  <div class="col-md-12 text-center">
  <p>Copyright © 2020. All rights reserved.</p></div>
  </div>
  </div>
  </div>
  <ul class="circles">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul></footer>
1 голос
/ 07 марта 2020

Помните, что Свойство z-index CSS устанавливает z-порядок позиционируемого элемента и его потомков или гибких элементов. Перекрывающиеся элементы с большим z-индексом покрывают элементы с меньшим.

Вы должны расположить любой элемент там, где хотите использовать z-индекс. Например (из MDN): 

.dashed-box { 
  position: relative;
  z-index: 1;
  border: dashed;
  height: 8em;
  margin-bottom: 1em;
  margin-top: 2em;
}

У вас есть: 

footer .main-footer{    padding: 20px 0; z-index: 1;}

Здесь я включаю относительное позиционирование, которое позволит z-index дать ожидаемый результат: 

footer .main-footer {
  padding: 20px 0;
  position: relative;
  z-index: 1;}

Вам нужно будет делать это везде, где вы используете z-index.

В вашем @keyframes animate { css у вас есть zindex: -1. Это приводит к тому, что ваши анимированные блоки появляются за черным фоном, а не поверх него. В своем тестировании я использовал z-index: 100, из-за которого блоки появлялись поверх черного фона.

Чтобы ответить на ваш вопрос о неработающих ссылках, используйте это: 

.footer-top {
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 3px solid #222;
    position: relative;
    z-index: 2000;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...