Listing
Command Button

# Using the Command Button to Conceal Other Elements

With some creative container and button styling, a click event can be placed on top of whatever elements you like. Like so:

This is some bold tag wrapped text inside the span!

The most important part of this styling is absolute positioning and z-index. Absolute positioning allows an HTML element to be removed from regular flow and put at a specific x,y position. z-index allows that positioned element to be put on top of the elements in regular flow. Its an integer representation of what "layer" the element exists on.

Absolute positioning coordinates are calculated from the first positioned parent, or the user agent frame. If we want to cover some specific element, if they both have an absolutely positioned parent, its very easy:

<span style="positon:relative;">
<img src="some.gif" style="position:absolute; top:0px; left:0px; z-index:5; height:100%; width:100%; border:0; background:transparent; cursor:pointer; display:inline-block; color:transparent; line-height:0px; " />
<div>All of the space that this div takes up in the span will be covered by the absolutely positioned image.<div>
</span>

inline-block is useful when trying to have the button fill a inline element like span. Inline elements do not try to expand to fill their contents and are not followed by line breaks, unlike block elements.

When using a block element like div rather than span as the relative container, inline-block is not necessary.