...
|
| Code Block |
|---|
| <!DOCTYPE html>
<html>
<body>
<p style="position: absolute; top: 125px; left: 125px; width: 300px;
background-color: rgba(0,0,255,.2);font-size:20px;">
<b>
This is the first paragraph.
</b>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum.
</p>
<p style="position: absolute; top: 10px; left: 10px; width: 300px;
background-color: rgba(255,0,0,.2);font-size:20px;">
<b>
This is the second paragraph.
</b>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum.
</p>
</body>
</html> |
|
|---|
| Result in Browser | HTML Code |
In the example shown, the paragraphs have been positioned so that they overlap. Also worth mentioning is the fact that the first paragraph in the code comes before the second paragraph, but is displayed after it. This is caused by the positioning.
See also: Removing HTML and Unicode
