CSS absolute positioning

Posted under » CSS on 13 March 2010

You can overlap text over another text or images (layering), even flash with this technique.

try this CSS

#layer1 {
	position:absolute;
	left:153px;
	top:213px;
	width:416px;
	height:43px;
	z-index:1;
}

Then put your text on the body of the HTML like so.

Look i'm floating

You will see the text "Look i'm floating" provided the text is contrasting with the background eg. white text over black background.

This is the same concept to relative positioning. Position with top bottom left right.

Set the div in the bottom right corner

.botright {
    display:block;
    position:absolute;
    bottom:0;
    right:0;
    width:150px;
	margin-bottom:50px;	
  }

Set the div in the center

.centered {
width:270px;
height:150px;
position:absolute;
left:50%;
top:50%;
margin-top: -50px;
margin-left: -100px;
}