In chapter you will learn about positioning. You can use positioning to overlap one box or
object over another. How does it work. You
must first set “position “ to relative.
When you set position to relative you are basically defining the the
object’s starting position to where it is currently located. Then you can can
use top , right , left or bottom to move the object around. You can also set position to absolute. When you do that you are moving the object ‘s
starting point to the upper right hand corner of the parent div, then you can use
top, right , left or bottom to move the object around. Use the example below
and see how that works.
<html>
<head>
<title>Learning
CSS</title>
<style >
.bigfont {
font-size:200%;
}
#blue {
color:blue;
}
.underline {
text-decoration:underline;
}
.bold {
font-weight:bold;
}
.greybox {
background-color:
grey;
width:250px;
height:250px;
position:
relative;
left: 100px;
bottom: 200px;
}
.redbox {
background-color:
red;
width:600px;
height:200px;
}
</style>
</head>
<body>
<div
class="redbox">
<p
class="bigfont">First Paragraph.</p>
</div>
<div
class="greybox">
<p
id="blue" class="bigfont">This written with a Bigfont in
the color blue.</p>
</div>
<p
class="left"> This will be underlined , have a bigfont and be bold => <span class="underline bigfont bold">THIS
IS AWESOME</
span> -> wow that kind of cool .</p>
</body>
</html>
0 comments: