我正在尝试为家庭作业设置一个作品集，我已经完成了所有工作，只是我意识到出于某种原因，我用来代替我的“元素”的所有图像都与我的固定图像重叠导航栏/标题。
我曾尝试使用 Chrome 开发控制台关闭所有影响图像(和标题)的样式，但没有成功，而且我还弄乱了 z-index，但也没有用。唯一是 position: absolute 的是标签(包装在 position: relative div 中，不包含图像。)我也尝试过谷歌搜索但收效甚微。我可能只是解释得不够好。
我不确定如何重现该问题，因为我无法找到原因，所以这可能是一些代码转储。
所有代码也可以在这里找到:https://github.com/Munch-Z/Basic-Portfolio
在 repo 协议(protocol)的顶部有一个指向实时 Github 页面的链接。
您可能必须(垂直)缩小屏幕才能获得滚动条，一旦向下滚动，图像就会重叠。
这是我的标题 HTML:
<header id="header">
<div id="header-content">
<h1 id="name">Zachary Murphy</h1>
<nav id="nav-bar">
<ul>
<li id="about-link"><a href="index.html">About</a></li>
<li id="portfolio-link"><a href="portfolio.html">Portfolio</a></li>
<li id="contact-link"><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
</header>
Header CSS:
header {
position: fixed;
top: 0;
right: 0;
background-color:#ffffff;
border-bottom: 3px solid;
border-color: #cccccc;
width: 100%;
padding: 0;
}
#header-content {
max-width: 960px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin: 0 auto;
position: relative;
padding: 0;
height: 90px;
}
header h1 {
background-color: #4aaaa5;
color: white;
padding: 25px 20px;
box-sizing: border-box;
height: 100%;
font-family: 'Georgia', Times, Times New Roman, serif;
}
#nav-bar ul {
display: flex;
flex-direction: row;
}
#nav-bar li {
padding: 0 10px;
list-style: none;
border-left: 1px solid #cccccc;
}
#nav-bar #about-link {
border-left: none;
}
Page HTML:
<div id="hangman-div">
<img class="portfolio-image" src="assets/Images/placeholder.jpg" alt="Hangman game preview">
<div id="hangman-text" class="text-wrapper">Hangman</div>
</div>
<div id="rpg-game-div">
<img class="portfolio-image" src="assets/Images/placeholder.jpg" alt="RPG game preview">
<div id="rpg-text" class="text-wrapper">RPG Game</div>
</div>
<div id="trivia-div">
<img class="portfolio-image" src="assets/Images/placeholder.jpg" alt="trivia game preview">
<div id="trivia-text" class="text-wrapper">Trivia Game</div>
</div>
<div id="info-widget-div">
<img class="portfolio-image" src="assets/Images/placeholder.jpg" alt="Rutgers info widget preview">
<div id="info-widget-text" class="text-wrapper">Rutgers Info Widget</div>
</div>
<div id="rock-paper-scissors-div">
<img class="portfolio-image" src="assets/Images/placeholder.jpg" alt="Rock paper scissors game preview">
<div id="rock-paper-scissors-text" class="text-wrapper">Rock Paper Scissors</div>
</div>
Page CSS:
#portfolio-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 15px 0px 0px;
max-width: 480px;
grid-gap: 25px 75px;
}
.portfolio-image {
width: 250px;
height: 200px;
position: relative;
}
#hangman-div, #rpg-game-div, #trivia-div, #info-widget-div, #rock-paper-scissors-div {
position: relative;
width: 200px;
}
.text-wrapper {
position: absolute;
color: #ffffff;
background-color: #4aaaa5;
text-align: center;
width: 250px;
top: 150px;
left: 0px;
padding: 10px 0px;
}
我希望能够在页面上滚动并让图像保持在标题“下方”，因为我想保持标题固定。
最佳答案
.navbar-header {background-color: #4AAAA5;}<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://aaronlilly.github.io/CDN/css/bootstrap.min.css">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<h1 id="name">Zachary Murphy</h1>
<nav id="nav-bar">
<ul>
<li id="about-link"><a href="index.html">About</a></li>
<li id="portfolio-link"><a href="portfolio.html">Portfolio</a></li>
<li id="contact-link"><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
</div></nav>
<div class="content-wrapper">
<h2>Portfolio</h2>
<div id="portfolio-wrapper">
<div id="hangman-div">
<img class="portfolio-image" src="assets/Images/placeholder.jpg" alt="Hangman game preview">
<div id="hangman-text" class="text-wrapper">Hangman</div>
</div>
<div id="rpg-game-div">
<img class="portfolio-image" src="assets/Images/placeholder.jpg" alt="RPG game preview">
<div id="rpg-text" class="text-wrapper">RPG Game</div>
</div>
<div id="trivia-div">
<img class="portfolio-image" src="assets/Images/placeholder.jpg" alt="trivia game preview">
<div id="trivia-text" class="text-wrapper">Trivia Game</div>
</div>
<div id="info-widget-div">
<img class="portfolio-image" src="assets/Images/placeholder.jpg" alt="Rutgers info widget preview">
<div id="info-widget-text" class="text-wrapper">Rutgers Info Widget</div>
</div>
<div id="rock-paper-scissors-div">
<img class="portfolio-image" src="assets/Images/placeholder.jpg" alt="Rock paper scissors game preview">
<div id="rock-paper-scissors-text" class="text-wrapper">Rock Paper Scissors</div>
</div>
</div>
</div>我做了一些事情来解决这个问题。我并不是说没有其他方法，但我就是这样做的。 #1，使用 Bootstrap 。 #2 您可能需要覆盖“导航栏”CSS 以获得所需的宽度/颜色等。 我使用自己的链接进行引导
<link rel="stylesheet" href="https://aaronlilly.github.io/CDN/css/bootstrap.min.css">
那么这就是你的“标题”
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<h1 id="name">Zachary Murphy</h1>
<nav id="nav-bar">
<ul>
<li id="about-link"><a href="index.html">About</a></li>
<li id="portfolio-link"><a href="portfolio.html">Portfolio</a></li>
<li id="contact-link"><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
</div></nav>
关于html - 有没有办法在不使用 z-index 的情况下阻止我的图像与标题/导航栏重叠(这似乎不起作用？)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56266012/