[英]Z-Index issue in my CSS
so I am working on creating a new portfolio for myself and I have just hit a little wall with a CSS issue while trying to style my social icons a certain way. 因此,我正在为自己创建一个新的作品集,而在尝试以某种方式设置社交图标样式时,我遇到了CSS问题。 The desired effect I am going for can be seen here: My Social Icons Demo .
我想要的效果可以在这里看到: 我的社交图标演示 。 However, if you view my portfolio, here , you can see that I'm not quite getting the same effect (note: my social icons are located in the top and bottom left corners of the page).
但是,如果您在这里查看我的投资组合,您会看到我的效果不尽相同(请注意:我的社交图标位于页面的左上角和左下角)。 I can't seem to get the white background behind my social icon images to transition in. I think this may have to do with a z-index error that is possibly conflicting with something else on my portfolio page but as of right now I am stuck.. any ideas??
我似乎无法在社交图标图像后面获得白色背景以进行过渡。我认为这可能与z-index错误有关,该错误可能与我的投资组合页面上的其他内容冲突,但截至目前,卡住了..任何想法吗? Would greatly appreciate it!
将不胜感激! Code below:
代码如下:
HTML 的HTML
<!-- SOCIAL -->
<div class="col-sm-4 text-left">
<div class="social-icons">
<a href="https://github.com/jlquaccia" target="_blank" class="me-transparent-btn">
<img src="./img/icons/github-6-48.png" alt="Github">
</a>
<a href="https://www.linkedin.com/profile/view?id=227782654&trk=nav_responsive_tab_profile" target="_blank" class="me-transparent-btn">
<img src="./img/icons/linkedin-48.png" alt="LinkedIn">
</a>
<a href="http://instagram.com/jquatchaa" target="_blank" class="me-transparent-btn">
<img src="./img/icons/twitter-48.png" alt="Instagram">
</a>
</div>
</div>
CSS 的CSS
.hero {
background-image: url(../img/star_trails_2_large.jpg);
background-attachment: fixed;
background-size: cover;
}
.social-icons {
margin-top: 41px;
a {
display: inline-block;
width: 50px;
height: 50px;
border: 1px solid #fff;
margin: 5px;
padding: 0;
position: relative;
cursor: pointer;
img {
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
-ms-filter: invert(100%);
-o-filter: invert(100%);
filter: invert(100%);
vertical-align: bottom;
display: inline-block;
-webkit-transform: scale(.7);
-moz-transform: scale(.7);
-ms-transform: scale(.7);
-o-transform: scale(.7);
transform: scale(.7);
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-ms-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
}
&:hover img {
-webkit-filter: invert(0%);
-moz-filter: invert(0%);
-ms-filter: invert(0%);
-o-filter: invert(0%);
filter: invert(0%);
-webkit-transform: scale(.8);
-moz-transform: scale(.8);
-ms-transform: scale(.8);
-o-transform: scale(.8);
transform: scale(.8);
}
&:after {
content: '';
background: #fff;
position: absolute;
width: 0;
height: 103%;
opacity: .5;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
left: 50%;
top: 50%;
z-index: -1;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
&:hover:after {
opacity: 1;
width: 105%;
}
}
}
.no_margin {
margin: 50px 0;
}
.img-responsive-center {
display: inline-block;
padding-top: 75px;
}
.inner {
padding-bottom: 100px;
span {
color: #EF3D33;
}
}
.text-center {
h2 {
color: white;
}
}
.delay-05s {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.delay-1s {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.delay-3s {
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
@media (max-width: 767px) {
.social {
display: none;
}
.img-responsive-center {
padding-top: 100px;
}
}
.down-btn {
width: 60px;
height: 60px;
background-color: $down-btn-bg;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
color: #fff;
font-size: 20px;
line-height: 60px;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
&:hover,
&:focus {
background-color: $down-btn-hover-focus;
color: #fff;
}
}
.down-btn-padding {
padding-bottom: 80px;
}
Add to your div.social-icons
position:relative; z-index:1;
添加到您的
div.social-icons
position:relative; z-index:1;
position:relative; z-index:1;
and this should solve your issue. 这应该可以解决您的问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.