EverWeb Widgets HTML5

Z-Index - Stacking Order

Front To Back Element Stacking

It would seem that a large number of users don't know too much about how items are position on a webpage - particularly the stacking order.
Every element in an HTML document can be either in front of or behind every other element in the document. This is known as the stacking order. Front to back stacking is achieved using a CSS selector call z-index. This can have both positive and negative values.
Before z-index can be applied to a object it must be positioned. In the case of items on a EverWeb page, every element is positioned and the stacking order will be in relation to the order in which the elements are added to the page. Items added later will have a higher z-index than those added before it.
A fair number of widgets require the user to bring the item to the front using the Arrange menu. Most of these involve something that pops up or slides in. Bringing an item to the front increases the z-index.
Stacking order is not quite as simple as this but the explanation given here is sufficient for most EverWeb users.

Dynamic Content

On a simple web page, where there are no objects overlapping, EverWeb will take care of z-index and the user will be none the wiser. Where there are elements which appear on hover or click, a little more thought may be required. Some elements which appear on click are actually there all the time - even although they can’t be seen. Since they require a higher z-index than the surrounding content, this will effect any dynamic content within these elements which they overlap. The most common of the elements effected is hyperlinks - text or image.
Here's an example of why it's a good idea to learn the basics of stacking order...
The image below left shows the icon navigation widget in the opened position. Since the area occupied by the navigation button extends right across the green rectangle, any links placed in that area with a lower z-index will not work.
The image below right shows an image link placed in the dead area. For this hyperlink to work, the icon should be brought to the front AFTER the navigation.

Dead Area
Using z-index