Posts Tagged ‘layered html elements css layers’

Creating Layered HTML Elements

November 15th, 2009 1 comment

Making elements that layer on top of each other is a wonderfully helpful addition to any web page. In my web page, for example. I’m using it to place the menu over my header image. This little bit of coding allows one to put one element on top of another and change the position of each one independently.

To put layer one on top, simply insert this into the html of your page:
<div style=”position:relative; font-size:50px; z-index:2;”>LAYER 1</div>
<div style=”position:relative; top:-50; left:5; color:red; font-size:80px; z-index:1″>LAYER 2</div>

To put layer two on top, use this:
<div style=”position:relative; font-size:50px; z-index:3;”>LAYER 1</div>
<div style=”position:relative; top:-50; left:5; color:red; font-size:80px; z-index:4″>LAYER 2</div>

Looking at this code, there are a couple of things we haven’t seen before. First, the position tag. The position tag can either be defined as relative or absolute. The relative tag means that the position will be determined from where the element is in the html: if the element is halfway down the page, according to the html, then the position will be calculated from that point. With the absolute tag, the position will be calculated from the upper left corner of the page.

Next, how to determine position. Position is determined with the tags left, right, top, and bottom. To move an element around, one first chooses relative or absolute position, and then uses the aforementioned tags to move the element with respect to the position chosen. The tag is set up like so:
position:absolute; top:-50; left: 5;

Here, the object is defined as being fifty pixels from the top of the webpage (the negative value means you subtract), and five pixels to the left (positive means you add.)

Finally, there is the z-index. This defines if the element is located on the top or the bottom of another element. The higher the z-index number, the higher the element, and you can bring the z-index number as high as you want. This means you can have as many elements layered on top of each other as you want.

I learned most of this from this website, which goes into a little more detail:

Have fun layering elements!