Question

我正在创建堆叠div的垂直布局。一切都进行得很顺利，直到#resume div，它一直隐藏在包含上面一张桌子的div下面。我尝试改变浮动和位置，但不能在.samples div下面得到div。我试图将代码复制到JS Fiddle，但是没有出现同样的问题。我真的很感激任何帮助。

以下是代码：

HTML：

    <head>
<title>Charles's Bio</title>
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
</head>
<html>
<body>
<link rel="stylesheet" type="text/css" href="bio.css">

<nav>
<br>
<h1>Learn More About Charles</h1>
<p></p>



<div class="navrow">
<table>
    <tr>
        <td><a href="#bout"><button>About Me</button></a></td>
        <td><a href="#work"><button>Work Samples</button></a></td>
        <td><a href="#resume1"><button>Resume</button></a></td>
        <td><a href="#blog1"><button>Blog</button></a></td>
        <td><a href="#contact1"><button>Contact</button></a></td>
    </tr>
</table>
</div>
</nav>

<a NAME = "bout"></a>
<div class = "space"></div>
<div id="AboutPictures">
<img src="">
<h3>Charles is a Northwestern University senior majoring in Journalism. He is addicted to sports, YouTube, and quality journalism. Edward's favorite publications include the Wall Street Journal, Daily Northwestern and New York Times. You can often find him in the gym, coding, or watching NFL or NBA games. <h3>

</div>

<div class="samples">
<a NAME = "work"></a>
<div class = "space"></div>
<table>
    <th>Pokemon</th>
    <tr>
        <td>
                    <p>Squirtle is an amphibion Pokemon. He can shoot water and hide in his shell</p>
                    <img src = "http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png">
        </td>
        <td>
                    <p>Hello Charzard</p>
                <img src = "http://assets.pokemon.com/assets/cms2/img/pokedex/full//006.png">
        </td>

        <td>
                    <p>Hello Charzard</p>
            <img src = "http://assets.pokemon.com/assets/cms2/img/pokedex/full//001.png">
        </td>
    </tr>
    <tr>
        <td>
                    <p>Hello Charzard</p>
            <img src = "http://vignette3.wikia.nocookie.net/fantendo/images/a/a5/Pikachu_digital_art_pokemon_by_dark_omni-d5wotdb.png/revision/latest?cb=20141113035440">
        </td>
        <td>
                    <p>Hello Charzard</p>
                <img src = "https://upload.wikimedia.org/wikipedia/en/5/5f/Pok%C3%A9mon_Lugia_art.png">
            </td>
        <td>
                    <p>Hello Charzard</p>
                <img src = "http://vignette1.wikia.nocookie.net/pokemon/images/f/ff/Togepi.png/revision/latest?cb=20100731212849">
        </td>
    </tr>
</table>
</div>

<div id="resume"> <a NAME ="resume1"></a><div class = "space">Resume Page </div></div>

<div id="blog"><a NAME = "blog1"></a><div class = "space"><br><br><br><br><br><br><br><br>Blog Page</div></div>

<div id="contacts"><a NAME="contact1"></a><div class = "space">contact Page</div></div>

</body>
</html>

CSS：

html, body{
    font-family: 'Lato', sans-serif;
    width: 100%;
    padding-top: 0px;
    margin: 0;
}
p{
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif; 
}
h1{
    font-family: Arial, Helvetica, sans-serif;
    color: white;
}
nav{
    position: fixed;
    width: 100%;
    background-color: black;
    text-align: center;
    top:0;
    left:0;
    z-index:9999;
}
.navrow{
    background-color: white;
    width: 100%;
}
.navrow table td{
    padding-left: 150px;
}
button{
    padding: 10px;
    font-family: Helvetica, Arial, sans-serif;  
}

.aboutpage h1{
    color:red;
}

.samples {
    float: left;
    height: 70%;
    width: 100%;
}
#resume {
    float: left;
    width: 100%;
    height: 100%;
    background-color: rgb(0,300,200);
}
#blog {
    float: left;
    width: 100%;
    height: 900px;
    background-color: rgb(0,300,150);
    position: relative;
}
#contacts {
    float: left;
    width: 100px;
    height: 100px;
    background-color: yellow;
    position: relative;
}
#AboutPictures {
    float: right;
    background-color: rgb(0,200,255);
}

#AboutPictures h3{
    margin-left: 20px;
}
img[src*="tumblr"]{
    height:360px;
    width:40%;
    float: right;
    top: 10px;
    padding:0 0 0 0;

}

.biopage {
    position:relative;
}
.samples table{
    position: relative;
    width: 100%;
}
.samples td{
    text-align: center;
    width: 30%;
    height:300px;
    position:relative;
    table-layout: fixed;
    background-color: rgb(0,300,300);
}
.samples td img{
    width: 290px;
    height:290px;
    z-index: 0;
}
.samples td:hover img{
    opacity: .5;

}
.samples p{
    margin: 0;
    position:absolute;
    left: 0;
    top: 50%;
    right:0;
    color: #fff;
    font-size: 20px;
    text-align: center;
    z-index:10;

}
.samples td:hover p{
    visibility: visible;
}
.samples td p{
    visibility: hidden;
}
.container{
    background color: white;
    width: 25%;
    float: right;
}
.container img{
    width: 100%;
}

.space {
    height:125px;
    background-color: rgb(0,300,300);
}

和问题div的快照：

Answer 1

使用Z-Index为.samples设置更高的优先级。给出的Z指数越高，将其置于其他层之上。您当前的.samples CSS为0。

防止div重叠为div格式

1 个答案: