Contents which remains in the normal flow of the document:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus.
Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. The "specialpara" is next in the markup.
This is the third paragraph of the positioning demo with gray background and red text. This paragraph has a "specialpara" ID so we can change its position value without affecting the other paragraphs. This "specialpara" has been styled with position:absolute and is positioned 20px from the top and 150px from the left side of the document's BODY element.
Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.
CSS includes position:absolute
p#specialpara {
position: absolute;
top: 20px;
left: 150px;
border:1px solid #000;
color:red;
background:#EEE;
}
HTML Markup
<p>Lorem ipsum dolor sit amet ...
nunc vitae purus.</p>
<p>Aenean viverra malesuada libero ...
<strong>"specialpara" is next in the markup</strong>.</p>
<p id="specialpara">This is the third paragraph ...
static, relative, absolute and fixed. </p>
<p>Mauris et eros eget erat ...
Nullam nunc.</p>