HTML z-index not working as expected - element position issue?

Question

I have a page with an input element whose position is determined by the normal flow of the page (ie its position is NOT explicitly defined as part of the element definition).

Then, I have other elements (divs) that are created programmatically with fixed position, and should appear behind the input element whenever there is an overlap between them.

I tried assigning to the input element a ridiculously high z-index (100001, while the programmatically elements have a z-index < 1000) but the input element still is shown BEHIND the others.

I found some posts suggesting that the input element should also be positioned as the other elements, but this could have negative impact on the general layout of the page.

Does anyone have a suggestion I may try?

Thanks.

Answer 1

z-index only applies to positioned elements, so you need to position it.

Set it to position: relative if you want to position it without moving it or taking it out of normal flow.

Answer 2

z-index is intended for elements positioned as absolute , relative and fixed .

Try setting your input position: relative , then you z-index should work.

#myInput {
    position: relative;
    z-index: 100001;
}