# Should I use z-index?

**URL:** <https://forum.freecodecamp.org/t/should-i-use-z-index/359780>\
**Category:** General\
**Created:** [March 17, 2020, 6:01am UTC](https://forum.freecodecamp.org/t/should-i-use-z-index/359780 "2020-03-17T06:01:11Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![kylekibet](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kylekibet/32/69624_2.png) [@kylekibet](https://forum.freecodecamp.org/u/kylekibet)\
**Post date:** [March 17, 2020, 6:01am UTC](https://forum.freecodecamp.org/t/should-i-use-z-index/359780/1 "2020-03-17T06:01:11Z")

</div>

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

![Without z-index](https://global.discourse-cdn.com/freecodecamp/original/3X/6/a/6a0fa65935b80bf048cd5b71e57ec52cca0c7389.gif)

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

![With z-index](https://global.discourse-cdn.com/freecodecamp/original/3X/2/a/2aefbe362bc6df99589c11e7d88b9444ea54b9d5.gif)

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

navbar properties (with z-index included)

```auto
#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

```auto
.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](https://codepen.io/kylekibet/full/poJwGvQ) 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](https://global.discourse-cdn.com/freecodecamp/original/3X/6/7/6766987a1bfb8830cc52c64568ba80cf324d36e7.gif)

Thank you 😇

---

<div class="post-metadata">

**Author:** ![bentom03](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bentom03/32/83108_2.png) [@bentom03](https://forum.freecodecamp.org/u/bentom03)\
**Post date:** [March 17, 2020, 7:39am UTC](https://forum.freecodecamp.org/t/should-i-use-z-index/359780/2 "2020-03-17T07:39:23Z")

</div>

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. 🙂

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.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 7:33pm UTC](https://forum.freecodecamp.org/t/should-i-use-z-index/359780/3 "2021-06-01T19:33:01Z")

</div>