Z index not working

Beginners
1

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
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;
}
}’

2

@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:

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

1 Like
3

This clarify most of my doubts.

Cheers

2 Likes
4

Good article

really puts the “C” in Cascade

mind your stacking contexts!

2 Likes
5

I had watched the 4 reasons your z-index isn’t working.Great video. Got the idea— relative parent, absolute child, but by that time my brain was at 10% capacity ; )

6

Amazing!!! It works.

Side note: my media queries really need help. Are PG media queries part of one or more of your youtubes, Bob?

Screen Shot 2020-11-03 at 10.36.53 AM
Screen Shot 2020-11-03 at 10.36.53 AM1083×582 193 KB

1 Like
7

No dedicated tut about media queries, but I think that is in the loop to be delivered soon.

1 Like
8

Update!! Belatedly, for those following this thread

Media Query tutorial by the Bobman himself.