Skip to content
Advertisement

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

I have a problem when I hover my article with class="card" name inside my div class="container", 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 class="header-container header-scroll">
    <div class="myHeader">
      <h1>
        <img src="/Website/Images/Spy_×_Family_logo.png" alt="header">
      </h1>
    </div>
    <nav class="myNav">
      <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 class="container">
      <article id="home" class="content-container-column card ">
        <h2>Header 2</h2>
        <img src="/Website/Images/3774625814.jpg" class="image-style" 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" class="card content-container-column">
        <h2>Header 2</h2>
        <img src="/Website/Images/357396304.jpg" class="image-style" 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" class="card content-container-column">
        <h2>Header 2</h2>
        <img src="/Website/Images/spy-x-family-yor-forger.gif" class="image-style" 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" class="profile">
      <article class="card-v2">
        <header class="profile-head">
          <h2>About Me</h2>
          <figure class="card-v3">
            <img src="/Website/Images/Dwiki_Yulian.jpg" alt="">
          </figure>
        </header>
        <section>
          <table class="table-style">
            <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

Advertisement

Answer

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 class="header-container header-scroll">
    <div class="myHeader">
      <h1>
        <img src="/Website/Images/Spy_×_Family_logo.png" alt="header">
      </h1>
    </div>
    <nav class="myNav">
      <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 class="container">
      <article id="home" class="content-container-column card ">
        <h2>Header 2</h2>
        <img src="/Website/Images/3774625814.jpg" class="image-style" 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" class="card content-container-column">
        <h2>Header 2</h2>
        <img src="/Website/Images/357396304.jpg" class="image-style" 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" class="card content-container-column">
        <h2>Header 2</h2>
        <img src="/Website/Images/spy-x-family-yor-forger.gif" class="image-style" 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" class="profile">
      <article class="card-v2">
        <header class="profile-head">
          <h2>About Me</h2>
          <figure class="card-v3">
            <img src="/Website/Images/Dwiki_Yulian.jpg" alt="">
          </figure>
        </header>
        <section>
          <table class="table-style">
            <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>
User contributions licensed under: CC BY-SA
8 People found this is helpful
Advertisement