Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.


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

12. Layout and Positioning: Arranging Elements > How absolute positioning works

How absolute positioning works

Let’s start by getting an idea of what absolute positioning does, and how it works. Here’s a little CSS to position the sidebar <div> with absolute positioning. Don’t type this in just yet; right now we just want you to get a feel for how this works:

image with no caption

What the CSS does

Now let’s look at what this CSS does. When an element is absolutely positioned, the first thing the browser does is remove it completely from the flow. The browser then places the element in the position indicated by the top and right properties (you can use bottom and left as well). In this case, the sidebar is going to be 100 pixels from the top of the page, and 200 pixels from the right side of the page. We’re also setting a width on the <div>, just like we did when it was floated.


  

You are currently reading a PREVIEW of this book.

                                                                                        

Get instant access to over
$1 million worth of books and videos.

  

Start a Free Trial