HTML and CSS Reference
In-Depth Information
Generally, when you're positioning elements, you pick a corner and specify where the
element should be located. In other words, there's never a need to set more than two of
the four positioning properties. If you set more than two, you could run into problems
with how the browser renders the page because you're specifying not only where the ele-
ment should be located but also the size of the element. It's much safer to use the sizing
properties to size your elements and then specify the position of one corner of your ele-
ment if you want to indicate where it should go on the page.
8
Relative Positioning
Let's look at a page that uses relative positioning. This page illustrates both how relative
positioning works and some of the problems with it. A screenshot of the page listed in
the following code appears in Figure 8.17.
Input
▼
<!DOCTYPE html>
<html>
<head>
<title>
CSS Example
</title>
<style type=“text/css”>
.offset {
border: 3px solid blue;
padding: 10px;
margin: 10px;
background-color: gray;
position: relative;
top: -46px;
left: 50px;
width: 33%; }
</style>
</head>
<body>
<p>
The absence of romance in my history will, I fear, detract somewhat
from its interest; but if it be judged useful by those inquirers who
desire an exact knowledge of the past as an aid to the interpretation
of the future, which in the course of human things must resemble if
it does not reflect it, I shall be content.
</p>
<p class=“offset”>
The absence of romance in my history will, I fear, detract somewhat
from its interest; but if it be judged useful by those inquirers who
desire an exact knowledge of the past as an aid to the interpretation
of the future, which in the course of human things must resemble if
it does not reflect it, I shall be content. In fine, I have written
my work, not as an essay which is to win the applause of the moment,
