CSS Positioning Methods: Ordering Overlapping Elements

As mentioned earlier, when elements overlap, the property used to specify which one is on top of which is the z-index property. More specifically, z- index controls the vertical stacking order of overlapping elements; and it only affects elements that are relatively, absolutely, or fixed positioned.

Elements positioned using these methods always appear on top of those with default static positioning. Normally, elements are stacked in the order that they appear in an HTML document, with the last one rendered topmost. The property is non-inherited and its value is a number. An element with a higher z-index is generally placed on top of that with a lower one. For example, an element with a z-index of 2 appears on top of one with 1. Figure 12.22 shows how the property is used and Figure 12.23 shows the rendered result. Each rule specifies the size, background color, absolute position, and z-index of each of the four elements.

Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.

Leave a Reply

Your email address will not be published. Required fields are marked *