Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

182 CHAPTER 4 Getting started with CSS3

In this example, div2 and its contents maintained the original size and were cut off on the

right side of the screen, and the last <div> element, div6, is still in its original location. The

values for top and left can also be negative to move the element in the opposite direction.

Using the absolute position

The element is removed from the HTML flow and positioned within the first non-static ele-

ment. If all parent elements are static (the default), then the element is positioned within the

browser window. In this example, div2 has the following style rule, which sets the position to

absolute, and no parent elements are non-static.

#div2 {

background-color: cyan;

position: absolute;

top: 15px;

left: 30px;

}

With the top set to 15 pixels, div2 and its contents will be pushed down 15 pixels, not from

its normal location, but from the top of the browser window. The left setting of 30 pixels will

push div2 and its contents to the right by 30 pixels, also not from its normal location, but

from the left side of the browser window. The result is shown in Figure 4-14.

FIGURE 4-14 he use of absolute positioning to move div2 and its contentsT

In this example, div2 and its contents maintained the original size, and the last <div> ele-

ment, div6, has moved from its original location and is now under div1 because div2 and its

contents are no longer in the HTML document flow. Because there are no parent elements

that are non-static, the positioning is relative to the browser window.