CSS边栏覆盖我的内容

Question

我找到了一个侧栏并插入了一个链接。 Here you can see a sample。

但是由于侧边栏覆盖了链接，链接不起作用。我能做些什么来解决这个问题？

z-index不适用于我。

a { 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 
.me { 
 
    width: 400px; 
 
    margin: 90px auto; 
 
} 
 
.me p, 
 
.me h1 { 
 
    text-transform: uppercase; 
 
    letter-spacing: 3px; 
 
    text-align: center; 
 
} 
 
.me p { 
 
    font-weight: 200; 
 
} 
 
.me span { 
 
    font-weight: bold; 
 
} 
 
.social { 
 
    position: fixed; 
 
    top: 20px; 
 
} 
 
.social ul { 
 
    padding: 0px; 
 
    -webkit-transform: translate(-270px, 0); 
 
    -moz-transform: translate(-270px, 0); 
 
    -ms-transform: translate(-270px, 0); 
 
    -o-transform: translate(-270px, 0); 
 
    transform: translate(-270px, 0); 
 
} 
 
.social ul li { 
 
    display: block; 
 
    margin: 5px; 
 
    background: rgba(0, 0, 0, 0.36); 
 
    width: 300px; 
 
    text-align: right; 
 
    padding: 10px; 
 
    -webkit-border-radius: 0 30px 30px 0; 
 
    -moz-border-radius: 0 30px 30px 0; 
 
    border-radius: 0 30px 30px 0; 
 
    -webkit-transition: all 1s; 
 
    -moz-transition: all 1s; 
 
    -ms-transition: all 1s; 
 
    -o-transition: all 1s; 
 
    transition: all 1s; 
 
} 
 
.social ul li:hover { 
 
    -webkit-transform: translate(110px, 0); 
 
    -moz-transform: translate(110px, 0); 
 
    -ms-transform: translate(110px, 0); 
 
    -o-transform: translate(110px, 0); 
 
    transform: translate(110px, 0); 
 
    background: rgba(255, 255, 255, 0.4); 
 
} 
 
.social ul li:hover a { 
 
    color: #000; 
 
} 
 
.social ul li:hover i { 
 
    color: #fff; 
 
    background: rgba(0, 0, 0, 0.36); 
 
    -webkit-transform: rotate(360deg); 
 
    -moz-transform: rotate(360deg); 
 
    -ms-transform: rotate(360deg); 
 
    -o-transform: rotate(360deg); 
 
    transform: rotate(360deg); 
 
    -webkit-transition: all 1s; 
 
    -moz-transition: all 1s; 
 
    -ms-transition: all 1s; 
 
    -o-transition: all 1s; 
 
    transition: all 1s; 
 
} 
 
.social ul li i { 
 
    margin-left: 10px; 
 
    color: #000; 
 
    background: #fff; 
 
    padding: 10px; 
 
    -webkit-border-radius: 50%; 
 
    -moz-border-radius: 50%; 
 
    border-radius: 50%; 
 
    width: 20px; 
 
    height: 20px; 
 
    font-size: 20px; 
 
    background: #ffffff; 
 
    -webkit-transform: rotate(0deg); 
 
    -moz-transform: rotate(0deg); 
 
    -ms-transform: rotate(0deg); 
 
    -o-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
} 
 
body { 
 
    background: #25343F; 
 
    color: #fff; 
 
    font-family: 'Raleway', sans-serif; 
 
}

<link href='http://fonts.googleapis.com/css?family=Raleway:400,200' rel='stylesheet' type='text/css'> 
 

 
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> 
 
<div> 
 
    <br /> 
 
    <br /> 
 
    <br /><a href="http://www.google.de">a link who don't work becauce overlay</a> 
 
</div> 
 
<nav class="social"> 
 
    <ul> 
 
    <li><a href="http://twitter.com/gian_michelle">Twitter <i class="fa fa-twitter"></i></a> 
 
    </li> 
 
    <li><a href="http://facebook.com/gian.michelle">Facebook <i class="fa fa-facebook"></i></a> 
 
    </li> 
 
    <li><a href="http://dribbble.com/gian_michelle">Dribbble <i class="fa fa-dribbble"></i></a> 
 
    </li> 
 
    <li><a href="http://behance.net">Behance <i class="fa fa-behance"></i></a> 
 
    </li> 
 

 
    </ul> 
 
</nav> 
 
<div class="me"> 
 
    <p>Created by: 
 
    <p> 
 
     <h1>Gian Di Serafino</h1> 
 
     <p>for <span>Informartion architecture</span> 
 
     </p> 
 
</div>

Answer 1

你需要给DIV的位置。为了不惹Z-索引，把div放在边栏后面。

div.problematic_div { 
    position:relative; 
} 

但我建议您检查一下如何定位元素。

div.problematic_div { 
 
    position: relative; 
 
} 
 
a { 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 
.me { 
 
    width: 400px; 
 
    margin: 90px auto; 
 
} 
 
.me p, 
 
.me h1 { 
 
    text-transform: uppercase; 
 
    letter-spacing: 3px; 
 
    text-align: center; 
 
} 
 
.me p { 
 
    font-weight: 200; 
 
} 
 
.me span { 
 
    font-weight: bold; 
 
} 
 
.social { 
 
    position: fixed; 
 
    top: 20px; 
 
} 
 
.social ul { 
 
    padding: 0px; 
 
    -webkit-transform: translate(-270px, 0); 
 
    -moz-transform: translate(-270px, 0); 
 
    -ms-transform: translate(-270px, 0); 
 
    -o-transform: translate(-270px, 0); 
 
    transform: translate(-270px, 0); 
 
} 
 
.social ul li { 
 
    display: block; 
 
    margin: 5px; 
 
    background: rgba(0, 0, 0, 0.36); 
 
    width: 300px; 
 
    text-align: right; 
 
    padding: 10px; 
 
    -webkit-border-radius: 0 30px 30px 0; 
 
    -moz-border-radius: 0 30px 30px 0; 
 
    border-radius: 0 30px 30px 0; 
 
    -webkit-transition: all 1s; 
 
    -moz-transition: all 1s; 
 
    -ms-transition: all 1s; 
 
    -o-transition: all 1s; 
 
    transition: all 1s; 
 
} 
 
.social ul li:hover { 
 
    -webkit-transform: translate(110px, 0); 
 
    -moz-transform: translate(110px, 0); 
 
    -ms-transform: translate(110px, 0); 
 
    -o-transform: translate(110px, 0); 
 
    transform: translate(110px, 0); 
 
    background: rgba(255, 255, 255, 0.4); 
 
} 
 
.social ul li:hover a { 
 
    color: #000; 
 
} 
 
.social ul li:hover i { 
 
    color: #fff; 
 
    background: rgba(0, 0, 0, 0.36); 
 
    -webkit-transform: rotate(360deg); 
 
    -moz-transform: rotate(360deg); 
 
    -ms-transform: rotate(360deg); 
 
    -o-transform: rotate(360deg); 
 
    transform: rotate(360deg); 
 
    -webkit-transition: all 1s; 
 
    -moz-transition: all 1s; 
 
    -ms-transition: all 1s; 
 
    -o-transition: all 1s; 
 
    transition: all 1s; 
 
} 
 
.social ul li i { 
 
    margin-left: 10px; 
 
    color: #000; 
 
    background: #fff; 
 
    padding: 10px; 
 
    -webkit-border-radius: 50%; 
 
    -moz-border-radius: 50%; 
 
    border-radius: 50%; 
 
    width: 20px; 
 
    height: 20px; 
 
    font-size: 20px; 
 
    background: #ffffff; 
 
    -webkit-transform: rotate(0deg); 
 
    -moz-transform: rotate(0deg); 
 
    -ms-transform: rotate(0deg); 
 
    -o-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
} 
 
body { 
 
    background: #25343F; 
 
    color: #fff; 
 
    font-family: 'Raleway', sans-serif; 
 
}

<link href='http://fonts.googleapis.com/css?family=Raleway:400,200' rel='stylesheet' type='text/css'> 
 

 
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> 
 
<nav class="social"> 
 
    <ul> 
 
    <li><a href="http://twitter.com/gian_michelle">Twitter <i class="fa fa-twitter"></i></a> 
 
    </li> 
 
    <li><a href="http://facebook.com/gian.michelle">Facebook <i class="fa fa-facebook"></i></a> 
 
    </li> 
 
    <li><a href="http://dribbble.com/gian_michelle">Dribbble <i class="fa fa-dribbble"></i></a> 
 
    </li> 
 
    <li><a href="http://behance.net">Behance <i class="fa fa-behance"></i></a> 
 
    </li> 
 

 
    </ul> 
 
</nav> 
 
<div class="problematic_div"> 
 
    <br /> 
 
    <br /> 
 
    <br /><a href="http://www.google.de">a link who don't work becauce overlay</a> 
 
</div> 
 
<div class="me"> 
 
    <p>Created by: 
 
    <p> 
 
     <h1>Gian Di Serafino</h1> 
 
     <p>for <span>Informartion architecture</span> 
 
     </p> 
 
</div>