Positioning elements on a web page
Sponsored Links
This presentation is the property of its rightful owner.
1 / 15

Positioning Elements on a Web Page PowerPoint PPT Presentation

  • Uploaded on
  • Presentation posted in: General

Positioning Elements on a Web Page. Chapter 13. 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.

Download Presentation

Positioning Elements on a Web Page

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript

Positioning elements on a web page

Positioning Elements on a Web Page

Chapter 13

How positioning properties work

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

Positioning elements on a web page

  • 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

Positioning elements on a web page

  • 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

Setting positioning values

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, %

Positioning elements on a web page

  • 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; }

Positioning elements on a web page

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.

When absolute positioning is relative

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.

When and where to use relative positioning

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; }

Stacking elements

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

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




Hiding parts of a page

Hiding Parts of a Page

  • Another property of absolutely positioned elements is

    • visibility

    • lets you hide part of the page

      • visibility: visible;

      • visibility: hidden

Powerful positioning strategies

Powerful Positioning Strategies

  • Use sparingly

  • Impossible to predict

  • Provides exact placement for specific elements.

Using css positioning for page layout

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.

Positioning elements on a web page

  • 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.

  • Login