opacity: 0.7;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
<head>
<title>positioning</title>
<style type='text/css'>
body {
background: lightyellow;
font: 12px sans-serif;
}
div {
width: 100px;
height: 100px;
border: 1px solid rgb(200, 200, 200);
opacity: 0.7;
}
div#one {
background: pink;
position: absolute;
top: 0;
left: 0;
}
div#two {
background: lightblue;
position: absolute;
top: 0;
right: 0;
}
div#three {
background: yellowgreen;
position: absolute;
bottom: 0;
left: 0;
}
div#four {
background: orange;
position: absolute;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
sit amet sem quis orci malesuada facilisis. Nulla dictum malesuada
magna. Quisque ac est et nibh porta nonummy. Cras pede tortor,
lacinia et, eleifend quis, consequat vel, odio. Proin urna mi,
facilisis et, consequat eu, scelerisque vel, lacus. Nunc turpis.
Vestibulum sed felis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
sit amet sem quis orci malesuada facilisis. Nulla dictum malesuada
magna. Quisque ac est et nibh porta nonummy. Cras pede tortor,
lacinia et, eleifend quis, consequat vel, odio. Proin urna mi,
facilisis et, consequat eu, scelerisque vel, lacus. Nunc turpis.
Vestibulum sed felis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
sit amet sem quis orci malesuada facilisis. Nulla dictum malesuada
magna. Quisque ac est et nibh porta nonummy. Cras pede tortor,
lacinia et, eleifend quis, consequat vel, odio. Proin urna mi,
facilisis et, consequat eu, scelerisque vel, lacus. Nunc turpis.
Vestibulum sed felis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
sit amet sem quis orci malesuada facilisis. Nulla dictum malesuada
magna. Quisque ac est et nibh porta nonummy. Cras pede tortor,
lacinia et, eleifend quis, consequat vel, odio. Proin urna mi,
facilisis et, consequat eu, scelerisque vel, lacus. Nunc turpis.
Vestibulum sed felis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
sit amet sem quis orci malesuada facilisis. Nulla dictum malesuada
magna. Quisque ac est et nibh porta nonummy. Cras pede tortor,
lacinia et, eleifend quis, consequat vel, odio. Proin urna mi,
facilisis et, consequat eu, scelerisque vel, lacus. Nunc turpis.
Vestibulum sed felis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
sit amet sem quis orci malesuada facilisis. Nulla dictum malesuada
magna. Quisque ac est et nibh porta nonummy. Cras pede tortor,
lacinia et, eleifend quis, consequat vel, odio. Proin urna mi,
facilisis et, consequat eu, scelerisque vel, lacus. Nunc turpis.
Vestibulum sed felis.
</p>
<div id='one'></div>
<div id='two'></div>
<div id='three'></div>
<div id='four'></div>
</body>
</html>
Related examples in the same category