# Z index not working
**URL:** https://forum.pinegrow.com/t/z-index-not-working/4651
**Category:** Beginners
**Created:** [November 2, 2020, 10:14pm UTC](https://forum.pinegrow.com/t/z-index-not-working/4651 "2020-11-02T22:14:02Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@kat](https://forum.pinegrow.com/u/kat)
#### Post date: [November 2, 2020, 10:14pm UTC](https://forum.pinegrow.com/t/z-index-not-working/4651/1 "2020-11-02T22:14:02Z")
I’m trying to created a sale text section similar to your hotspots tutorial for the white Datsun, motorcycle and Tbird images on [https://mcgraphics.us/art/index3.html](https://mcgraphics.us/art/index3.html)
A big part of my problem is that the sale sections show perfectly in PG and when I do a preview in browser but don’t work when uploaded.
Possibly z index: 9999 & positioning is my problem?
`.sale–content h3 {
position: absolute;
top: 5%;
left: 51px;
padding-left: 17px;
margin-top: 17px;
z-index: 9999;
font-family: ‘Alfa Slab One’, cursive;
font-size: 31px;
display: block;
width: 50%;
}
@media all and (max-width: 750px) {
.sale–content h3 {
font-size: 18px;
margin-top:7px;
}
}
@media all and (max-width: 450px) {
.sale–content h3 {
font-size: 18px;
left: 20px;
}
}
@media all and (min-width: 1000px) {
.sale–content h3 {
font-size: 18px;
left: 50px;
}
}’
---
### Author:  [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [November 3, 2020, 10:46am UTC](https://forum.pinegrow.com/t/z-index-not-working/4651/2 "2020-11-03T10:46:33Z")
@kat - Can you post a screenshot of what it looks like in Pinegrow or the preview browser? I’m not completely sure what you are trying to achieve.
If you are trying to get the button and text to stay at the very top in the white area you need to restructure your HTML. You currently have a structure of:
```auto
div
img
div sale--main
div sale--xxxx
button sale--button
div sale--content
h3
```
One way to restructure would be to bring the h3 out a level and display it as inline block. You could then add the ‘sale–content’ class directly to the h3.
Basically, you want an outer container with relative positioning to give positioning in the flow. Then you want an inner container of absolute to hold the positioned content. Each piece of content can then be positioned within the inner container. You currently have ‘sale–main’ as your outer container. You could move the button and the h3 both inside the sale–content block and then position the sale-content block.
Cheers,
Bob
---
### Author:  [@red-rosefields](https://forum.pinegrow.com/u/red-rosefields)
#### Post date: [November 3, 2020, 11:22am UTC](https://forum.pinegrow.com/t/z-index-not-working/4651/3 "2020-11-03T11:22:01Z")
This clarify most of my doubts.
> **[4 reasons your z-index isn’t working (and how to fix it) — Coder Coder](https://www.freecodecamp.org/news/4-reasons-your-z-index-isnt-working-and-how-to-fix-it-coder-coder-6bc05f103e6c/)**
>
> This post was originally published on Coder-Coder.com. Z-index is a CSS property that allows you to position elements in layers on top of one another. It’s super useful, and honestly a very important tool to know how to use in CSS. Unfortunately,...
Cheers
---
### Author:  [@droidgoo](https://forum.pinegrow.com/u/droidgoo)
#### Post date: [November 3, 2020, 2:24pm UTC](https://forum.pinegrow.com/t/z-index-not-working/4651/4 "2020-11-03T14:24:27Z")
Good article
really puts the “C” in Cascade
mind your stacking contexts!
---
### Author:  [@kat](https://forum.pinegrow.com/u/kat)
#### Post date: [November 3, 2020, 6:47pm UTC](https://forum.pinegrow.com/t/z-index-not-working/4651/5 "2020-11-03T18:47:01Z")
I had watched the [4 reasons your z-index isn’t working](https://www.freecodecamp.org/news/4-reasons-your-z-index-isnt-working-and-how-to-fix-it-coder-coder-6bc05f103e6c/).Great video. Got the idea— relative parent, absolute child, but by that time my brain was at 10% capacity ; )
---
### Author:  [@kat](https://forum.pinegrow.com/u/kat)
#### Post date: [November 3, 2020, 6:58pm UTC](https://forum.pinegrow.com/t/z-index-not-working/4651/6 "2020-11-03T18:58:05Z")
Amazing!!! It works.
Side note: my media queries really need help. Are PG media queries part of one or more of your youtubes, Bob?
---
### Author:  [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [November 3, 2020, 7:04pm UTC](https://forum.pinegrow.com/t/z-index-not-working/4651/7 "2020-11-03T19:04:59Z")
No dedicated tut about media queries, but I think that is in the loop to be delivered soon.
---
### Author:  [@schpengle](https://forum.pinegrow.com/u/schpengle)
#### Post date: [March 5, 2021, 10:46am UTC](https://forum.pinegrow.com/t/z-index-not-working/4651/8 "2021-03-05T10:46:05Z")
Update!! Belatedly, for those following this thread
Media Query tutorial by the Bobman himself.
> **[Using media queries and CSS functions to create a responsive design in...](https://pinegrow.com/tutorials/using-media-queries-and-css-functions-to-create-a-responsive-design-in-pinegrow/)**
>
> Your website needs to look good on a variety of screen sizes. Pinegrow makes responsive design easy with a variety of different tools.