Question

第一次问一个问题。我已经详尽地查看了这一点，我知道我的问题是什么，但我不知道如何修复它。我尝试了多种不同的东西但无济于事。我正在尝试学习html和css，这是我第一次自己手写一个网站，虽然我是在Dreamweaver中做的。

我无法获得位置和社交媒体字体真棒图标成为链接。网址目前只是通用的，我在左右浮动上添加了一个边框，这样我就可以检查它们是否在正确的位置。

我认为发生的事情是我的内容框或我的容器的填充与页脚重叠，但我已经更改了z-index并尝试将填充一起删除，但它们似乎仍然无法正常工作（然后页面看起来并不像我想要的那样）我一直在寻找这个问题的答案，但是，在这一点上，我认为这可能是我特别搞砸了或者不明白那是实现这一目标，所以我想与大家联系。

这是我的HTML（我希望这有效！）：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

</head>

<body>
<!---outer containers-->
<div id="container">
<div id="header">


<div id="logo">
</div>
<nav>
  <ul>
    <li><a href="about.html">ABOUT</a></li>
    <li><a href="portfolio.html">PORTFOLIO</a></li>
    <li><a href="pricing.html">PRICING</a></li>
    <li><a href="contact.html">CONTACT</a></li>
  </ul>
</nav>

</div>



<div id="contentbox">
<div id="content">

    <div id="frontcontent">   
   <p> 
        <img id="sanjapic" src="Images/SanjaPicture.jpg"/>
        <h1>Edgy Hair Stylist Serving the Denver Area</h1>
        </p>
     </div>


</div>


<footer>

<div id="social">
<a href="http://www.facebook.com">
<i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i>
</a>
<a href="http://www.yelp.com">
<i class="fa fa-yelp fa-2x" aria-hidden="true"></i>
</a>
<a href="http://www.instagram.com">
<i class="fa fa-instagram fa-2x" aria-hidden="true"></i>
</a>
</div>

<div id="left">
<p>
<a href="http://www.googlemaps.com"><i class="fa fa-map-marker fa-3x" aria-hidden="true"></i>
Address: 657 Santa Fe Dr, Denver, CO 80204<br>
Phone:(303) 953-9486</a>
</p>
</div>


</footer>

</div>

  </div>
</body>
</html>

这是我的css：

@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Fjalla+One);


body {
    background-image: url(Images/bgLarge.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    padding: 0;
    font-family:'Fjalla One', sans-serif;
    font-style: normal;
    font-weight: 400;
    background-attachment: fixed;
    margin:0px;
    background-color: #2F2F2F;
    }


#container {
    width: 100%;
    margin: 0 auto;
    position: relative;

}

#header {
    width: 100%;
    height: 100px;
    background-image: url(Images/toptent.png);
    background-repeat: no-repeat;
    position: relative;
    background-size: contain;
    z-index:50;
}

#logo {
    background-image: url(Images/SanjaLogoGray.png);
    height: 70px;
    background-repeat: no-repeat;
    z-index: 100;
    width: 100%;
    margin: 0 auto;
    position:relative;
    max-width: 250px;
    display:block;
}

#contentbox {
    width: 80%;
    height:100%;
    background-color: #ffffff;
    margin: 0 auto;
    position: relative;
    max-width: 800px;
    margin-top: -110px;
    padding-top: 100px;
    display: block;
    z-index: -2000;
    -webkit-box-shadow: 0px 5px 15px 10px #2F2F2F;
    box-shadow: 0px 5px 15px 10px #2F2F2F;
}

#content {
    margin-top: 30px;
    padding:2%;
    display: block;

}



#about {
    position:relative;
    margin:0;
    left:-70px;
    top:-8px;


}

#sanjapic {
    height:auto;
    width: 80%;
    max-width:400px;
    margin: 0 auto;
    position:relative;
    display:block;
    padding-top:10px;

}


h1 {
    font-size:1.2em;
    text-align:center;
    margin:0 auto;


}


#frontcontent h1 {
    max-width:60%;
    height: auto;
    width:80%;

}

nav {
    width: 80%;
    background: #ffffff;
    border-right: none;
    margin: 0 auto;
    max-width:800px;
    margin-bottom:10px;
    margin-top:10px;


}

nav ul {
    overflow: hidden;
    margin: 0;
    padding: 0;



}

nav ul li {
    list-style: none;
    float: left;
    text-align: center;
    width: 25%; /* fallback for non-calc() browsers */
    width: calc(100% / 4);
    box-sizing: border-box;
    margin-bottom:20px;




}

nav ul li:first-child {
    border-left: none;
}

nav ul li a {
    display: block;
    text-decoration: none;
    color: #000000;
    padding:10px;

}

nav ul li a:hover {
    display: block;
    text-decoration: none;
    color: #312847;
    border: 2px solid #000000;
    border-radius: 5px;
    -webkit-box-shadow: 2px 2px 5px #617574;
    box-shadow: 2px 2px 5px #617574;
}

nav ul li a:active {
    background-color:#7DB4B9
}



footer  {
    background-color:#333333;
    height:80px;
    width:100%;
    margin:0 auto;
    z-index:3000;
    position:relative;
    height:100%;

}

footer a{
    color:#ffffff;
    padding:5px;
    border:#E9191D thick solid;
    display:inline-block;
    text-decoration:none;


}

#social {
    float:right;
    padding:20px;



}

#left {
    color:#ffffff;
    padding:5px;
    border:#E9191D thick solid;
    display:inline-block;
    font-size:.7em;


}

Answer 1

您的问题是关于#contentbox的以下声明：

z-index: -2000;

这绝对是你不想做的事情。您可见项目的最小z-index应该始终为0，并且您应该从那里开始。

同时避免使用太大的数字，因为它更难以保持标签。

更新：这里是您的代码http://jsbin.com/zatogisepo/edit?html,css,output

的工作版本

链接无法在页脚

1 个答案: