Make delicious recipes!

Chapter 7: Layers and float styles



As seen in previous chapter on position, the position of an element can be controlled by the position style.
What happens, when the position of elements is changed in such a way that they begin to overlap?

Consider the following two divs:

div style="background-color:red;width:300px;height:75px
div style="background-color:yellow;width:300px;height:75px



If the below one is moved up using position:relative; top:-20px; left:100px, we get the following:

top:-20px; left:100px;


To allow the red div to overlap, z-index style is used (along with the position style).
An element with higher z-index is displayed over an element with smaller z-index.

position:relative; z-index:2

position:relative; z-index:1;
top:-20px; left:100px;




Float styles



Float style enables the floated element to appear embedded inside the other element.
Example:


This text just wraps around the yellow div because the div's style has been specified as the following:

float:left;
height:60px;
margin:10px;

Without float, the above would looked as:

This text just wraps around the yellow div because the div's style has been specified as the following:

height:60px;
margin:10px;



Float can have only two options: float:left or float:right








Like us on Facebook to remain in touch
with the latest in technology and tutorials!


Got a thought to share or found a
bug in the code?
We'd love to hear from you:

Name:
Email: (Your email is not shared with anybody)
Comment:

Facebook comments:

Site Owner: Sachin Goyal