Basic containing block with relatively and absolutely positioned child elements

By Admin

<html>
<head>
<title>CSS tutorial</title>
<style type="text/css">
div {
	position:relative;
	margin: 40px;
	border:2px dashed #222;
}
h3 {
	position:absolute;
	margin-top:-25px;
}
p {
	position:relative;
	margin-top:25px;
	margin-left:5%;
}
</style>
</head>

<body>

<div>
	<h3>This is the content's title</h3>
	<p>The title &lt;h3&gt; and the following paragraphs &lt;p&gt; are contained within the &lt;div&gt; containing block.<p>
	<p>The title ended up out of its containing block, due being positioned absolutely.</p>
</div>

</body>
</html>

Mar