Home > OS >  Why is my card overlapping the fixed nav when I hover it?
Why is my card overlapping the fixed nav when I hover it?

Time：07-30

I have a problem when I hover my article with name inside my div , it looks like the article overlaps the nav. How do I fix this without removing my transform scale in .card:hover? I want to make it without overlapping with the nav when I hover over it.

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


var navbar = document.querySelector(".myNav");


var sticky = navbar.offsetTop;


function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;700&display=swap');
* {
  text-decoration: none;
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  background-image: url('/Website/Images/SPY_X_FAMILY.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  min-height: 200vh;
  margin: 0;
  padding: 0;
}

.header-container {
  margin: 0;
  opacity: 0.885;
}

.container {
  padding: 10px;
  background-color: #FFA1C9;
  float: left;
  width: 75%;
  display: flex;
  flex-direction: column;
}

nav {
  background-color: #F94892;
  margin: 0 50px 50px 50px;
  border-radius: 5px;
  transition: 0.3s;
}

nav:hover {
  transform: scale(1.005);
  transition: 0.3s;
}

nav li {
  color: rgb(227, 118, 118);
  text-align: center;
  padding: 10px;
}

nav ul {
  margin-top: 0;
}

nav a {
  color: white;
  font-family: 'Quicksand';
  font-size: 20px;
}

.myHeader {
  text-align: center;
  background-color: #FFC4C4;
  margin: 20px 20px 0 20px;
  border-radius: 10px;
  padding: 12px;
}

header h1>img {
  width: 42%;
}

nav li {
  margin: 0;
}

nav a {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  position: relative;
  z-index: 0;
  font-family: 'Quicksand';
}

nav a::before {
  content: "";
  position: absolute;
  width: 0;
  height: 15px;
  background: rgb(182, 1, 32);
  bottom: 0;
  left: 0;
  z-index: -1;
  transition: 0.2s linear;
}

nav a:hover::before {
  width: 100%;
}

.card {
  background-color: #FBE5E5;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  margin: 1.25em;
  padding: 1.25em;
}

.card:hover {
  transform: scale(1.0025);
  transition: 0.2s;
  position: relative;
}

.content-container>h2 {
  margin: 10px;
}


/* text font-size */

h2 {
  font-size: 2.25em;
  color: rgb(212, 27, 58);
  font-family: sans-serif;
  font-weight: 700;
  margin: 20px;
}

p {
  font-size: 1.25em;
  color: F94892;
}

h3 {
  font-size: 1.25em;
  color: rgb(212, 27, 58);
}

h1 {
  margin: 0;
}


/* image */

.image-style {
  text-align: center;
  width: 100%;
  max-height: 300%;
  object-fit: cover;
  object-position: center;
}


/* sticky navbar */

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  margin: 0;
  transition: 0.3s;
  transform: scale(1.0025);
}

.sticky li {
  display: inline-block;
  padding-left: 50px;
}


/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */

.sticky nav {
  padding-top: 60px;
}


/* profile things */

.card-v2 {
  background-color: #FBE5E5;
  box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  margin: 1.25em;
  padding: 1.25em;
}

.card-v2:hover {
  transform: scale(1.0025);
  transition: 0.2s;
  box-shadow: 0 5px 10px 5px #F94892;
}

.profile {
  background-color: #FFA1C9;
  padding: 5px;
  margin: 0;
  float: right;
  width: 25%
}

.profile img {
  width: 200px;
}

.profile header {
  text-align: center;
}

.profile-head {
  display: inline;
}

#aside {
  background-color: #FFA1C9;
  margin: 0;
}

.card-v3 {
  background-color: #FFC4C4;
  border-radius: 5px;
  margin: 1.25em;
  padding: 1.25em;
}

.card-v3:hover {
  box-shadow: 0 4px 8px 8px #efd6d6;
}


/* table */

.table-style {
  text-align: center;
}
<!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="stylesheet" href="style.css">
  <title>My Problem</title>
</head>

<body>
  <header >
    <div >
      <h1>
        <img src="/Website/Images/Spy_×_Family_logo.png" alt="header">
      </h1>
    </div>
    <nav >
      <ul>
        <li><a href='#home'>Home</a></li>
        <li><a href='#about'>About<a/></li>
                  <li><a href='#other'>Other</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <div >
      <article id="home" >
        <h2>Header 2</h2>
        <img src="/Website/Images/3774625814.jpg"  alt="">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum architecto culpa ab enim tempora atque corporis nam rem, exercitationem quasi cumque et quam quisquam odio, labore fugit molestias, quo quod?</p>
        <p>Lorem</p>
        <h3>Header 3</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto inventore nisi provident quasi reiciendis odit reprehenderit ut non, voluptatum perspiciatis blanditiis illo a! Rem, recusandae ab commodi provident ex praesentium.</p>

      </article>
      <article id="about" >
        <h2>Header 2</h2>
        <img src="/Website/Images/357396304.jpg"  alt="">
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Excepturi expedita soluta nihil, praesentium perferendis cum rerum similique ab? Natus saepe molestias reiciendis voluptas voluptatibus consectetur adipisci praesentium asperiores deleniti
          odio.</p>
      </article>
      <article id="other" >
        <h2>Header 2</h2>
        <img src="/Website/Images/spy-x-family-yor-forger.gif"  alt="">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores tempora doloribus dicta quibusdam, corrupti quam maiores laboriosam quo voluptatum autem ea ad quaerat id suscipit magnam unde cupiditate, voluptates harum.</p>
      </article>
    </div>

    <aside id="aside" >
      <article >
        <header >
          <h2>About Me</h2>
          <figure >
            <img src="/Website/Images/Dwiki_Yulian.jpg" alt="">
          </figure>
        </header>
        <section>
          <table >
            <tr>
              <th>Name:</th>
              <td></td>
            </tr>
            <tr>
              <th>Tempat, tanggal lahir:</th>
              <td></td>
            </tr>
            <tr>
              <th>Alamat:</th>
              <td></td>
            </tr>
            <tr>
              <th>Agama:</th>
              <td></td>
            </tr>
            <tr>

            </tr>
          </table>
        </section>

      </article>
    </aside>

  </main>

  <script src="muscle.js"></script>

</body>

</html>

If anything is missing from the snippet, you can check my jsfiddle here

CodePudding user response：

What you're experiencing is something referred to as The Stacking Context which, if you think about it from a top-down perspective, is how elements are rendered in the browser. To solve this, you can set the parent element -- in this case the header-container -- to position: relative; and give it a z-index of 1 to override the default of 0. That will elevate it above the card which is using the default of 0 even when hovered.

Here's another good explanation for it as well: https://www.joshwcomeau.com/css/stacking-contexts/

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


var navbar = document.querySelector(".myNav");


var sticky = navbar.offsetTop;


function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;700&display=swap');
* {
  text-decoration: none;
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  background-image: url('/Website/Images/SPY_X_FAMILY.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  min-height: 200vh;
  margin: 0;
  padding: 0;
}

.header-container {
  margin: 0;
  opacity: 0.885;
  position: relative;
  z-index: 1;
}

.container {
  padding: 10px;
  background-color: #FFA1C9;
  float: left;
  width: 75%;
  display: flex;
  flex-direction: column;
}

nav {
  background-color: #F94892;
  margin: 0 50px 50px 50px;
  border-radius: 5px;
  transition: 0.3s;
  z-index: 2;
}

nav:hover {
  transform: scale(1.005);
  transition: 0.3s;
}

nav li {
  color: rgb(227, 118, 118);
  text-align: center;
  padding: 10px;
}

nav ul {
  margin-top: 0;
}

nav a {
  color: white;
  font-family: 'Quicksand';
  font-size: 20px;
}

.myHeader {
  text-align: center;
  background-color: #FFC4C4;
  margin: 20px 20px 0 20px;
  border-radius: 10px;
  padding: 12px;
}

header h1>img {
  width: 42%;
}

nav li {
  margin: 0;
}

nav a {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  position: relative;
  z-index: 0;
  font-family: 'Quicksand';
}

nav a::before {
  content: "";
  position: absolute;
  width: 0;
  height: 15px;
  background: rgb(182, 1, 32);
  bottom: 0;
  left: 0;
  z-index: -1;
  transition: 0.2s linear;
}

nav a:hover::before {
  width: 100%;
}

.card {
  background-color: #FBE5E5;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  margin: 1.25em;
  padding: 1.25em;
  transition: 0.2s;
}

.card:hover {
  transform: scale(1.0025);
  transition: 0.2s;
}

.content-container>h2 {
  margin: 10px;
}


/* text font-size */

h2 {
  font-size: 2.25em;
  color: rgb(212, 27, 58);
  font-family: sans-serif;
  font-weight: 700;
  margin: 20px;
}

p {
  font-size: 1.25em;
  color: F94892;
}

h3 {
  font-size: 1.25em;
  color: rgb(212, 27, 58);
}

h1 {
  margin: 0;
}


/* image */

.image-style {
  text-align: center;
  width: 100%;
  max-height: 300%;
  object-fit: cover;
  object-position: center;
}


/* sticky navbar */

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  margin: 0;
  transition: 0.3s;
  transform: scale(1.0025);
  z-index: 1;
}

.sticky li {
  display: inline-block;
  padding-left: 50px;
}


/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */

.sticky nav {
  padding-top: 60px;
}


/* profile things */

.card-v2 {
  background-color: #FBE5E5;
  box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  margin: 1.25em;
  padding: 1.25em;
  z-index: 0;
}

.card-v2:hover {
  transform: scale(1.0025);
  transition: 0.2s;
  box-shadow: 0 5px 10px 5px #F94892;
}

.profile {
  background-color: #FFA1C9;
  padding: 5px;
  margin: 0;
  float: right;
  width: 25%
}

.profile img {
  width: 200px;
}

.profile header {
  text-align: center;
}

.profile-head {
  display: inline;
}

#aside {
  background-color: #FFA1C9;
  margin: 0;
}

.card-v3 {
  background-color: #FFC4C4;
  border-radius: 5px;
  margin: 1.25em;
  padding: 1.25em;
  z-index: 0;
}

.card-v3:hover {
  box-shadow: 0 4px 8px 8px #efd6d6;
}


/* table */

.table-style {
  text-align: center;
}
<!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="stylesheet" href="style.css">
  <title>My Problem</title>
</head>

<body>
  <header >
    <div >
      <h1>
        <img src="/Website/Images/Spy_×_Family_logo.png" alt="header">
      </h1>
    </div>
    <nav >
      <ul>
        <li><a href='#home'>Home</a></li>
        <li><a href='#about'>About</a>a></li>
        <li><a href='#other'>Other</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <div >
      <article id="home" >
        <h2>Header 2</h2>
        <img src="/Website/Images/3774625814.jpg"  alt="">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum architecto culpa ab enim tempora atque corporis nam rem, exercitationem quasi cumque et quam quisquam odio, labore fugit molestias, quo quod?</p>
        <p>Lorem</p>
        <h3>Header 3</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto inventore nisi provident quasi reiciendis odit reprehenderit ut non, voluptatum perspiciatis blanditiis illo a! Rem, recusandae ab commodi provident ex praesentium.</p>

      </article>
      <article id="about" >
        <h2>Header 2</h2>
        <img src="/Website/Images/357396304.jpg"  alt="">
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Excepturi expedita soluta nihil, praesentium perferendis cum rerum similique ab? Natus saepe molestias reiciendis voluptas voluptatibus consectetur adipisci praesentium asperiores deleniti
          odio.
        </p>
      </article>
      <article id="other" >
        <h2>Header 2</h2>
        <img src="/Website/Images/spy-x-family-yor-forger.gif"  alt="">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores tempora doloribus dicta quibusdam, corrupti quam maiores laboriosam quo voluptatum autem ea ad quaerat id suscipit magnam unde cupiditate, voluptates harum.</p>
      </article>
    </div>

    <aside id="aside" >
      <article >
        <header >
          <h2>About Me</h2>
          <figure >
            <img src="/Website/Images/Dwiki_Yulian.jpg" alt="">
          </figure>
        </header>
        <section>
          <table >
            <tr>
              <th>Name:</th>
              <td></td>
            </tr>
            <tr>
              <th>Tempat, tanggal lahir:</th>
              <td></td>
            </tr>
            <tr>
              <th>Alamat:</th>
              <td></td>
            </tr>
            <tr>
              <th>Agama:</th>
              <td></td>
            </tr>
            <tr>

            </tr>
          </table>
        </section>

      </article>
    </aside>

  </main>

  <script src="muscle.js"></script>

</body>

</html>

CodePudding user response：

try to set the z-index of the nav to 100

nav {
    z-index: 100;
}

Page link：https//www.codepudding.com/os/493755.html

Prev:How can I make my left/right arrow stem appear on hover?
Next:Rest operator with Variable reference
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding