个人中心
gpt4 book ai didi

html - 防止 div 重叠为堆叠的 div 格式

转载 作者：行者123 更新时间：2023-11-28 06:13:27 25 4
gpt4 key购买 nike

我正在创建堆叠 div 的垂直布局。在 #resume div 出现之前，一切都很顺利，它一直隐藏在包含其上方表格的 div 下方。我尝试更改 float 和位置，但无法完全获取 .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 的快照:

DIV 

`

最佳答案

使用 Z-Index 将更高的优先级放在 .samples 上。给定的 Z-Index 越高，将把它放在其他层之上。 .samples 的当前 CSS 为 0。

关于html - 防止 div 重叠为堆叠的 div 格式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36019782/

25 4 0
文章推荐： c++ - 了解 C++11 中 std::function 的模板参数？
文章推荐： ios - 从 json 数据值创建字典
文章推荐： c++ - Thread 对象在创建后立即销毁自身？
文章推荐： ios - 使用 NSLayout 设置 UILabel 的 X 和 Y 值
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com