时间戳

首页 > 解决方案 > 在固定标题上可见的图片库

html - 在固定标题上可见的图片库

问题描述

我正在尝试在我正在处理的一个相对简单的网站上实现一个固定的标题。它适用于每个页面，除了一个带有我选择的图片库的页面，其中固定标题出现在图库中的照片后面。我尝试设置 z-index 属性，但它要么不起作用，要么我不太明白它是如何工作的。任何帮助将非常感激。

CSS：

@charset "utf-8";
/* CSS Document */

*{margin:0; padding:0;}

.clr{
    clear: both;
}

.parallax {
  background-image: url("../images/bg.jpg");

  height: 1080px;

  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%
}

a{
    text-decoration: none;
    color:#000000;
}

a:hover{
    color:#FF0004;
}

a:active{
    color:#000000;
}

a:visited{
    color:#000000;
}

.main-header{
    background-color: #ffffff;
    line-height: 1;
}

.main-header h1{
    color: #F800FF;
    font-size: 9vw;
    padding: 0;
}

.navbar{
    background-color:#BCBCBC;
    color:#FFFFFF;
    width:100%;
    line-height: normal;
    padding: 1vw;
}

.navbar ul{
    padding: 0px;
    list-style: none;
}

.navbar li{
    display:inline;
}

.navbar a{
    color: #FFFFFF;
    text-decoration: none;
    vertical-align: middle;
    font-size: calc(10px + .6vw);
    padding: 1.5vw;
}

.navbar a:hover{
    */border-top: #F800FF solid thick;*/
}

.footer-bar{
    background-color:#BCBCBC;
    color:#FFFFFF;
    line-height: normal;
    padding-top: 1vw;
    padding-bottom: 1vw;
    margin-top: 2vw;
}

.footer-bar ul{
    padding: 0px;
    list-style: none;
}

.footer-bar li{
    display:inline;
    margin-left: .5vw;
    margin-right: .5vw;
}

body{
    margin: 0;

    /*background-image: url("");
    background-size:cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;*/

    background-color: #ffffff; 
    color: #000000;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    font-size: 18px;
    font-weight: normal;
    line-height: 1.6em;
}

h1{
    color:#000000;
    font-size: 3vw;
    padding-bottom: .5em;
    padding-top: 1.5em;
}

h2{
    font-size: 2vw;
    color:#000000;
    padding-bottom: .5em;
    padding-top: .5em;
}

h3{
    font-size: 2vw;
    color:#000000;
    padding-bottom: .5em;
    padding-top: .5em;
}

.container{
}

.container{
    width: 80%;
    margin: auto;
    text-align: center;
}

.container-h{
    width: 95%;
    margin: auto;
    text-align: center;
}

.container-f{
    width: 95%;
    margin: auto;
    text-align: center;
}

.box-1{
    background-color: #ffffff;
    color: #000000;
    /*opacity: 0.9;*/
        /*filter: alpha(opacity=90);*/
    padding: 10px;
    margin: 20px 0;
}

.categories{
    background-color:#00FFE8;
    color:#000000;
    /*opacity: 0.9;*/
        /*filter: alpha(opacity=90);*/
    border: 10px solid #000000;
    padding: 10px;

}

.categories ul{
    padding: 0;
    list-style: none;

}

.categories li{
    padding-bottom: 4px;
    border-bottom: 2px #000000 dashed;
}

/*FOR CSS IMAGE GALLERY*/

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.heading {
    text-align: center;
    font-size: 2.0em;
    letter-spacing: 1px;
    padding: 40px;
    color: white;
}

.gallery-image {
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.gallery-image img {
  height: 250px;
  width: 350px;
  transform: scale(1.0);
  transition: transform 0.4s ease;
}

.gallery-image-c img {
  height: 350px;
  width: 350px;
  transform: scale(1.0);
  transition: transform 0.4s ease;
}

.img-box {
  box-sizing: content-box;
  margin: 10px;
  height: 250px;
  width: 350px;
  overflow: hidden;
  display: inline-block;
  color: white;
  position: relative;
  background-color: white;
}

.img-box-c {
  box-sizing: content-box;
  margin: 10px;
  height: 350px;
  width: 350px;
  overflow: hidden;
  display: inline-block;
  color: white;
  position: relative;
  background-color: white;
}

.caption {
  position: absolute;
  bottom: 5px;
  left: 20px;
  opacity: 0.0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.transparent-box {
  height: 250px;
  width: 350px;
  background-color:rgba(0, 0, 0, 0);
  position: absolute;
  top: 0;
  left: 0;
  transition: background-color 0.3s ease;
}

.transparent-box-c {
  height: 350px;
  width: 350px;
  background-color:rgba(0, 0, 0, 0);
  position: absolute;
  top: 0;
  left: 0;
  transition: background-color 0.3s ease;
}

.img-box:hover img { 
  transform: scale(1.1);
}

.img-box-c:hover img { 
  transform: scale(1.1);
}

.img-box:hover .transparent-box {
  background-color:rgba(0, 0, 0, 0.5);
}

.img-box-c:hover .transparent-box-c {
  background-color:rgba(0, 0, 0, 0.5);
}

.img-box:hover .caption {
  transform: translateY(-20px);
  opacity: 1.0;
}

.img-box-c:hover .caption {
  transform: translateY(-20px);
  opacity: 1.0;
}

.img-box:hover {
  cursor: pointer;
}

.img-box-c:hover {
  cursor: pointer;
}

.caption > p:nth-child(2) {
  font-size: 0.8em;
}

.opacity-low {
  opacity: 0.5;
}

HTML：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/style.css">
</head>

<body>
    <header class="main-header">
        <div class="container-h">
            <h1>HEADING</h1>
        </div>
    </header>
    <nav class="navbar" id="myNavbar">
        <div class="container">
             <ul>
                <li><a href="index.html">menu</a></li>
                <li><a href="releases.html">menu</a></li>
                <li><a href="media.html">menu</a></li>
                <li><a href="live.html">menu</a></li>
                <li><a href="press.html">menu</a></li>
                <li><a href="contact.html">menu</a></li>
        </ul>
        </div>
    </nav>
    <div class="box-1">
        <div class="container">
          <div class="gallery-image">
            <a href="images/bandpics/promo1.jpg" target="_blank"><div class="img-box">
              <img src="images/bandpics/promo1.jpg" alt="" />
              <div class="transparent-box">
                <div class="caption">
                  <p></p>
                  <p class="opacity-low"></p>
                </div>
              </div> 
            </div></a>
            <a href="images/bandpics/poster.jpg" target="_blank"><div class="img-box">
              <img src="images/bandpics/poster.jpg" alt="" />
              <div class="transparent-box">
                <div class="caption">
                  <p> </p>
                  <p class="opacity-low"> </p>
                </div>
              </div>
            </div></a>
            <a href="images/bandpics/promo2.jpg" target="_blank"><div class="img-box">
              <img src="images/bandpics/thumbs/promo2.jpg" alt="" />
              <div class="transparent-box">
                <div class="caption">
                  <p> </p>
                  <p class="opacity-low"> </p>
                </div>
              </div>
            </div></a>
            <a href="images/bandpics/promo3.jpg" target="_blank"><div class="img-box">
              <img src="images/bandpics/thumbs/promo3.jpg" alt="" />
              <div class="transparent-box">
                <div class="caption">
                  <p> </p>
                  <p class="opacity-low"> </p>
                </div>
              </div> 
            </div></a>
            <a href="images/bandpics/band1.jpg" target="_blank"><div class="img-box">
              <img src="images/bandpics/thumbs/band1.jpg" alt="" />
              <div class="transparent-box">
                <div class="caption">
                  <p> </p>
                  <p class="opacity-low"> </p>
                </div>
              </div> 
            </div></a>
            <a href="images/bandpics/band2.jpg" target="_blank"><div class="img-box">
              <img src="images/bandpics/thumbs/band2.jpg" alt="" />
              <div class="transparent-box">
                <div class="caption">
                  <p> </p>
                  <p class="opacity-low"> </p>
                </div>
              </div> 
            </div></a>
            <a href="images/bandpics/band1.jpg" target="_blank"><div class="img-box">
              <img src="images/bandpics/thumbs/band1.jpg" alt="" />
              <div class="transparent-box">
                <div class="caption">
                  <p> </p>
                  <p class="opacity-low"> </p>
                </div>
              </div> 
            </div></a>
            <a href="images/bandpics/band3.jpg" target="_blank"><div class="img-box">
              <img src="images/bandpics/thumbs/band3.jpg" alt="" />
              <div class="transparent-box">
                <div class="caption">
                  <p> </p>
                  <p class="opacity-low"> </p>
                </div>
              </div> 
            </div></a>
            <a href="images/bandpics/falling.jpg" target="_blank"><div class="img-box">
              <img src="images/bandpics/thumbs/falling.jpg" alt="" />
              <div class="transparent-box">
                <div class="caption">
                  <p> </p>
                  <p class="opacity-low"> </p>
                </div>
              </div> 
            </div></a>
            <a href="images/bandpics/terrorpromo.jpg" target="_blank"><div class="img-box">
              <img src="images/bandpics/thumbs/terrorpromo.jpg" alt="" />
              <div class="transparent-box">
                <div class="caption">
                  <p> </p>
                  <p class="opacity-low"> </p>
                </div>
              </div> 
            </div></a>
            <a href="images/bandpics/mirror.jpg" target="_blank"><div class="img-box">
              <img src="images/bandpics/thumbs/mirror.jpg" alt="" />
              <div class="transparent-box">
                <div class="caption">
                  <p> </p>
                  <p class="opacity-low"> </p>
                </div>
              </div> 
            </div></a>
            <a href="images/bandpics/promo4.jpg" target="_blank"><div class="img-box">
              <img src="images/bandpics/thumbs/promo4.jpg" alt="" />
              <div class="transparent-box">
                <div class="caption">
                  <p> </p>
                  <p class="opacity-low"> </p>
                </div>
              </div> 
            </div></a>
          </div>
        </div>
    </div>

    <div class="clr"></div>

    <footer class="footer-bar">
        <div class="container-f">
            <ul>
                <li><a href="http://www.instagram.com"><img src="images/socialmedia/instagram.png" alt="Instagram" style="width: calc(20px + 2vw)"</a></li>
                <li><a href="http://www.facebook.com"><img src="images/socialmedia/facebook.png" alt="Facebook" style="width: calc(20px + 2vw)"</a></li>
                <li><a href="http://www.twitter.com"><img src="images/socialmedia/twitter.png" alt="Twitter" style="width: calc(20px + 2vw)"</a></li>
                <li><a href="https://open.spotify.com"><img src="images/socialmedia/spotify.png" alt="Spotify" style="width: calc(20px + 2vw)"</a></li>
                <li><a href="https://itunes.apple.com"><img src="images/socialmedia/apple.png" alt="Apple Music" style="width: calc(20px + 2vw)"</a></li>
                <li><a href="https://www.youtube.com"><img src="images/socialmedia/youtube.png" alt="YouTube" style="width: calc(20px + 2vw)"</a></li>
                <li><a href="http://soundcloud.com"><img src="images/socialmedia/soundcloud.png" alt="Soundcloud" style="width: calc(20px + 2vw)"</a></li>
            </ul>
        </div>
    </footer>

<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("myNavbar");
var sticky = navbar.offsetTop;
function myFunction() {
  if (window.pageYOffset > sticky) {
    navbar.classList.add("sticky");
  } else {
    navbar.classList.remove("sticky");
  }
}
</script>

</body>
</html>

标签： htmlcss

解决方案

除非我误解了您的问题，但如果您将 z-index: 1: 添加到导航栏类，它似乎可以解决您的问题。

.navbar { z-index: 1; }

推荐阅读