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

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"
<html xmlns="http://www.w3.org/1999/xhtml">
<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;
<div id="main">
<div id="nav">
<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>
<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>




Not a subscriber?

Start A Free Trial

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