CSS property for always on top

There are times that some elements we have in our pages are not displaying the way want it to be. Like one element is covering another elements' part. The example of this is an element which is designed to hide and show   like a dropdown sub-menu usually when it is on showing state it sometimes penetrates another elements thus causing some part of it to be covered. Technically, I found out that their are 2 reasons why this is happening and also 2 solutions to solve it.

1st, The ordering of elements usually causing it. The thing is that the last element will display on the top most so, to solve the problem try to make switching between the element that is affected and the element that is affecting it. But if this is not possible, like a you will ruin your code when you do this or for some reasons that you cannot do changes to it try the second one.

2nd, The element that is affecting the affected element is using has a higher value of z-index property in CSS. So to solve the problem just make sure that the CSS property z-index of your affected element is higher than the CSS property z-index of the element that is affecting it.

It usually looks like this below.

...{

z-index: 10;

}

So, just keep in mind that z-index is the layer position. Its position in layer can be specified though z-index. So, I hope that this would help.

Thank you for reading.