By default, does <h1> have higher z-index than <h2>?

HTML & CSS
1

In moving my h1 and h2 tags close to one another, I have discovered that on some occassions h2 will overlay h1 and on other times - on a different page - it will not.

I am using minus margin values to move h2 up towards h1, but do not think this is the cause. This is the only way I know to move the h2 line up. I have also tried using z-index values to move either but that did not work at all. I used a positive z-index in the h1 rule to try and raise it above h2 and vice-versa on the h1 element. Neither worked.

Any thoughts or comments are most welcome.

Thanks!

2

Try setting different background colours to highlight the differences.

Beware that h1 has default padding values which may be the problem.

I would try setting border, margin and padding to :0 then first position the H1 element for every situation then adjust H2 parameters.

Edit.
Also the H tags are all blocks and it may be better to add display: inline-block to all H elements.

3

By default, does <h1> have higher z-index than <h2>?

No. By default, elements stack in the order they come in the HTML, with the later ones sitting above those before them (which you see when they are forced to overlap).

To set z-indexes on them (and thus change the default stacking order), you need some kind of positioning. E.g.

h1, h2 {position: relative;}
h1 {z-index: 2;}
h2 {z-index: 1;}
4

@John_Betong

Thanks for the suggestions. I will try each and report back.

I just assumed that h1 would always be ‘above’ h2, but that was a poor guess on my part.

Thanks again for your help.

5

@ralphm

Ah, so that’s how it works. I can picture the ‘boxes’ in my mind, but never knew what you just disclosed. I’m now feeling drunk with power. Ha!

I still have some digging to do because I have one page where the h2 element went behind h1, but something must not be quite right with that page.

Thanks so much for your help.

Phillip

1 Like
6

@ralphm

I just tried your markup and it worked like a charm on the two problem pages.

Thanks a million for your help.

Phillip

P.S. Sometimes I like to solve my own problems, but after wasting half the day on this I thought it wise to seek some help. Thanks again.

1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.