Should I use z-index?

1

I had an issue when I mouse over card the text would appear on the navbar

Without z-index

I used z-index on the navbar and it works properly.

With z-index

But it kinder feels like a hack, So if you could kindly explain what is going on?

navbar properties (with z-index included)

#nav-bar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  position: fixed;
  padding-left: 30px;
  padding-right: 10px;
  background: var(--awesome-background);
  z-index: 2;
}

card properties

.card {
  width: 30%;
  border: 1px solid var(--awesome-background);
  transition: 0.5s;
}
.card:hover {
  box-shadow: 10px 10px 5px grey;
  cursor: pointer;
  transform: scale(1.01);
}

This is a link to the project.

Bonus Question!?

When I mouse over the card and scroll without moving the mouse, the .card:hover effect is still there until I move the mouse. How can I solve it?

hover-funny-effect
hover-funny-effect435×559 2.14 MB

Thank you :innocent:

2

Hey kylekibet,

‘z’ is a dimension in 3D, like x, y, and z dimensions. When we apply position property to any element, we remove it from the normal DOM flow. For example, when you applied ‘position: fixed’ to the nav-bar, the card overlapped it.

In order to keep it above all other elements, we need to modify the z or the depth index of the nav-bar. Hence, you applied z-index with a value of 2 to the nav-bar, it came above the card in the 3rd dimension.

Hope this makes sense. :slight_smile:

As for the bonus question, I don’t see anything wrong happening in your project link. The hover effect remains as long as the mouse is over the card. As I scrolled, the hover effect was removed.