Positioning Elements on a Web Page

1. Positioning Elements on a Web Page Chapter 13

2. How Positioning Properties Work • Absolute: Lets you determine an element’s location by specifying a • Left • Right • Top • Bottom • In pixels, ems, or percentages • They are completely detached from the flow of the page

3. Relative: is placed relative to its current position in the HTML flow • If you wanted to move a headline/banner • Position an element 20 px from the top • And 200 px from the left • It would move from where it would normally appear • Other element s on the page would move to accommodate it. • Such a move leaves a hole where the element would have been

4. Fixed: is locked into place on the screen • When scrolling, fixed elements remain onscreen as paragraphs and headlines, images scroll off. • Static: Content follows the normal top-down flow of HTML. • Position: absolute; • See page 327

5. Setting Positioning Values • Display area of a Web browser window is called a “viewport” • Has top, bottom, left, and right edges • Four edges has a corresponding CSS property: • Top, bottom, left, and right • You do not need to specify all four edges • Two are usually enough • To specify the distance from the edge of a page to the edge of the element, use any valid measurement—ems, px, %

6. You can also use negative positioning • Left: -10px • After the position property, you list two properties, i.e., if you want to position a banner use this style: • #banner { • position: absolute; • Left: 100px; • top: 50px; • Width: 760px; }

7. top: 50px; left: 100px; Technically, you can specify both left and right position properties and let the browser determine the width of the element. Unfortunately, IE 6 or older will not get this right. It recognizes the left, but ignores the top, right, and bottom. Width and Height positioning doe exactly the same thing.

8. When Absolute Positioning is Relative • If another element has absolute positioning • The second positioned element will be relative to the first • If an element inside an absolutely positioned element is positioned absolutely, it will position relative to its parent.

9. When (and Where) to use Relative Positioning • You get a big benefit from placing an element relative to another tag • If that tag moves, the positioned element moves also • h1 { position: relative;} • h1 img { • position: absolute; • top: 0; • right: 0; }

10. Stacking Elements • Absolutely positioned elements sit above your web page • They can reside on top of or underneath other positioned elements • Stacking takes place on the z-index • z-index represents the order in which positioned elements are stacked

11. z-Index • Think of : • a Web page is a piece of paper • Sticky note is the absolutely positioned element • Think of a deck of cards: • top card is z-index 52 • bottom card is z-index 1 1 2 3

12. Hiding Parts of a Page • Another property of absolutely positioned elements is • visibility • lets you hide part of the page • visibility: visible; • visibility: hidden

13. Powerful Positioning Strategies • Use sparingly • Impossible to predict • Provides exact placement for specific elements.

14. Using CSS Positioning for Page Layout • Do not position everything • The banner: it is at the top, were you want it, it does not need positioning • The content wrapper: is a special element with other elements inside . If you want the contents to appear below the banner, do not position it.

15. The main content: You may have to indent it, but you don’t need to position it. • The left sidebar: May fall below the main content, if it does, position it. • The right sidebar: If it falls below other elements or lands where you don’t want it, position it. • The footer: if it appears where you want it, at the bottom of the page, do not position it.