Блог

Главная - Вопросы по программированию - Из-за непрозрачности в CSS карточки на моей странице перекрывают панель навигации

Из-за непрозрачности в CSS карточки на моей странице перекрывают панель навигации

#javascript #html #css #frontend #navbar

#javascript #HTML #css #интерфейс #панель навигации

Вопрос:

Я создаю веб-сайт для мема с криптомонетами, проблема в том, что моя панель навигации не перекрывает некоторые созданные мной ссылки и карточки, которые имеют аргумент ‘opacity’ в CSS. Я хочу, чтобы моя панель навигации перекрывала все при прокрутке вниз.

Пример фото https://imgur.com/a/Ipd1lOT

HTML-код:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200amp;family=Robotoamp;family=Roboto Slabamp;display=swap" rel="stylesheet">

    <link rel="stylesheet" href="CSS/navbar.css">
    <link rel="stylesheet" href="CSS/buttons.css">
    <link rel="stylesheet" href="CSS/details.css">
    <link rel="stylesheet" href="CSS/container.css">
    <link rel="stylesheet" href="CSS/container2.css">
    <link rel="stylesheet" href="CSS/container3.css">
    <link rel="stylesheet" href="CSS/footer.css">

    <link rel="icon" type="image/gif/png" href="assets/shitcoin_logo.png">
    
    <title>Shitcoin - Worst crypto currency</title>
</head>
<body>
<header>
    <div class="Nav-Container">

        <a href=""><img class="logo" src="assets/shitcoin_logo.png" alt=""></a>

      <nav class="navbar">
        <ul>
            <li class="navbar-links"><a href="">Home</a></li>
            <li class="navbar-links"><a href="">About us</a></li>
            <li class="navbar-links"><a href="">Stake</a></li>
            <li class="coinprice"><img src="assets/shitcoin_logo.png" alt=""><p>:amp;nbsp;amp;nbsp;$0.00213</p></li>
            <li><a href="#" class="walltet">Connect Wallet</a></li>
        </ul> 
      </nav>
    </div>
</header>
     <div class="container1"> 
        <div class="aboutcointext"> 
            <h1>Welcome to the <span>THUNDER</span> project homepage</h1>
            <h2>Worst cypto coin available on the market!</h2>
            <a href="" class="buycoin">Buy Thunder (THD)</a>
        </div>
        <div class="aboutcoinlinks">
            <a href="" class="fb">Facebook</a>
            <a href="" class="insta">Instagram</a>
            <a href="" class="twitter">Twitter</a>
        </div>
    </div>
    <div class="details">Why you should <span>NOT</span> invest in us?</div>
    <div class="container2">
        <div class="reason1">
            <img src="assets/man_on_toilet.png" alt="">
            <h3>Reason 1:</h3>
            <p>We have very little to no experience in the crypto world</p>
        </div>
        <div class="reason2">
            <img src="assets/just_toilet.png" alt="">
            <h3>Reason 2:</h3>
            <p>This coin is made as a joke and should not be taken seriously</p>
        </div>
        <div class="reason3">
            <img src="assets/money-pngrepo-com.png" alt="">
            <h3>Reason 3:</h3>
            <p>Your capital is at risk and we are not responsible for your money</p>
        </div>
    </div>
    <div class="mining_details">You can mine <span>Shitcoin</span> but we don't guarantee you'll make money</div>
    <div class="container3">
        <div class="">
            <p>Compact tool made by us to help you mine easier:</p>
            <a href="" class="minerbutton">Download THD miner</a>
        </div>
    </div>

<footer>
    <div class="footer-container">
        <h2>Contact Us</h2>
        <ul>
            <li><a href="">Support</a></li>
            <li><a href="">Email</a></li>
            <li><a href="">About Us</a></li>
        </ul>
    </div>
    <div class="footer-container">
        <h2>FAQ</h2>
        <ul>
            <li><a href="">How to buy?</a></li>
            <li><a href="">How to sell?</a></li>
            <li><a href="">How to mine THD?</a></li>
            <li><a href="">More...</a></li>
            
        </ul>
    </div>
</footer>    

</body>
</html>

CSS-код для панели навигации:

 body{
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    background: linear-gradient(0deg, rgba(47,48,48,1) 0%, rgba(73,80,87,1) 100%);
    /* background-color: #495057; */
    color: white;
}
header{
    position: sticky;
    top: 0;
    background-color: #ADB5BD;
}
header::after{
    content: '';
    display: table;
    clear:both;
}
.Nav-Container{
    width: 80%;
    margin: 0 auto;
}
.logo{
    width: 5rem;
    float: left;
}
.navbar{
    float: right; 
    /* text-align: center; */
}
.navbar ul{
    list-style: none;
    margin:0;
    padding:0;
}
.navbar li{
    display: inline-block;
    margin-left: 70px;
    padding-top: 31px;

    position: relative;
}
.navbar a{
    color: #495057;
    text-decoration: none;
    text-transform: uppercase;
}
.navbar a:hover{
   color: white;
}
.navbar-links::before{
    content:'';
    display: block;
    height: 5px;
    background-color: white;

    position: absolute;
    top: 0;
    width: 0%;

    transition: all ease 250ms;
}
.navbar-links:hover::before{
    width: 100%;
}
.navbar img{
    float:left;
    width: 2rem;
    position: relative;
    bottom: 7px;
}
.navbar p{
    display: inline;
}
.wallet{
    display: inline;
    padding: 5px 5px;
    border: 1px solid #495057;
    border-radius: 7px;
}

CSS-код для ссылок в социальных сетях:

 .aboutcoinlinks{
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.aboutcoinlinks a{
    align-self: flex-start;
    margin-left:10px;
    padding: 20px 15px;
    text-decoration: none;
    color: white;
    text-align: center;
    background-color: black;
    opacity:70%;
    transition: all ease 250ms;
}
.aboutcoinlinks a:hover{
    opacity: 100%;
}

.aboutcoinlinks .fb{
    padding: 20px 15px;
    background-color: #4267B2;
    border: 1px solid #4267B2;
    border-radius: 10px;
}
.aboutcoinlinks .insta{
    padding: 20px 15px;
    background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
    border: 1px solid linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);;
    border-radius: 10px;
}
.aboutcoinlinks .twitter{
    padding: 20px 15px;
    background-color: #1DA1F2;
    border: 1px solid #1DA1F2;
    border-radius: 10px;
}

Комментарии:

1. Вы пробовали добавлять a z-index в css панели навигации? Можете ли вы поместить свой код в скрипку?

2. Спасибо за ответ, вы были правы, я забыл, что z-index вообще существует :)).

3. jsfiddle.net/Okta25/L8x0ez5u/6 вот скрипка, если хотите, я исправил проблему, спасибо

Ответ №1:

Вы можете обратиться к этому примеру.

 window.onscroll = function () { myFunction() };

    var header = document.getElementById("header");
    function myFunction() {
      if (window.pageYOffset >= 30) {
        header.classList.add("sticky")
      } else {
        header.classList.remove("sticky");
      }
    } 
 body{
margin:0;
}
header{
    position: fixed;
    width: 100%;
    padding: 5px 20px;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.75s;
}
header .logo{
    color: rgb(255, 255, 255);
    font-weight: 700;
    font-size: 30px;
    text-decoration: none;
}
header .nav{
    position: relative;
    display: flex;
}
header .nav li{
    list-style: none;
    margin-left: 50px;
    height:100%;
}
header .nav li a{
    text-decoration: none;
    color: #fff;
    font-weight: 300;
    font-size: 20px;
}
header.sticky{
    background: rgba(255,255,255,0.85);
    padding-top:0px;
    padding-bottom:0px;
    box-shadow: 0 5px 20px rgba(0,0,0,0,0.5);
    height:3.75rem;
}
header.sticky .logo{
    color: rgb(0, 0, 0);
}
header.sticky ul{
    height:100%;
}
header.sticky ul li{
    height:100%;
    display:flex;
    align-items: center;
}
header.sticky ul li a{
    color:rgb(204, 34, 34);
}
header.sticky .nav li:hover{
    border-bottom: 5px solid #ff0157;
}
p{
    font-weight: 300;
    color: #111;
}
.ban{
     position: relative;
     width: 100%;
     height: 600px;
     display: flex;
     align-items: center;
     justify-content: center;     
     background: linear-gradient(45deg,rgba(255,255,255,0.1),rgba(0,0,0,0.35)),url('https://winteriscoming.net/files/2021/01/thor-4-marvel-chris-hemsworth.jpg');
     background-repeat: no-repeat;
     background-size:cover;
     background-position:left;
}
.ban .box{
    max-width: 1000px;
    text-align: center;
}
.ban .box h3{
    font-size: 5rem;
    color: #fff;
}
.ban .box p{
    font-size: 1rem;
    color: #fff;
} 
 <header id="header">
    <a href="#ban" class="logo">Avenger</a>
    <ul class="nav">
      <li><a href="#ban">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#menu">Menu</a></li>
      <li><a href="#expert">Expert</a></li>
      <li><a href="#contact">contact</a></li>
    </ul>
  </header>
 
  <section class="ban" id="ban">
    <div class="box">
      <h3>Always Choose Good</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam sit nemo blanditiis tenetur, autem enim
        similique dolor saepe earum consequuntur.</p>
      <a href="#menu" class="bnt">Our Menu</a>
    </div>
  </section>

Метки: