• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 12. Positioning, Floats, and Z-i... > Absolute Positioning: To Another Blo...

Absolute Positioning: To Another Block

Returning to the earlier example in which I described a containing block for the content block, you can move on to see how an absolutely positioned block is positioned only in relation to its containing block (see Example 12-4).

Example 12-4. Absolutely positioning a block to its containing block

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>working with style</title>
<style type="text/css">
#main {
           position: absolute;
           left: 50px;
           top: 20px;
           border: 1px solid green;
           }
#content {
           position: absolute;
           left: 100px;
           top: 50px;
           width: 300px;
           border: 1px solid red;
           background-color: #ccc;
           }
ul, li, a {
           list-style-type: none;
           display: inline;
           text-decoration: none;
           }
</style>
</head>
<body>
<div id="main">
<div id="nav">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="content">
<h1>The Black Cat</h1>
<p>I married early, and was <a href="http://www.poemuseum.org/">happy to find</a> 
in my wife a disposition not uncongenial with my own. Observing my partiality for 
domestic pets, she lost no opportunity of procuring those of the most agreeable 
kind. We had birds, gold fish, a fine dog, rabbits, a small monkey, and a cat.</p>
</div>
					</div>
</body>
</html>

					  


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint