Positioning elements on a web page
1 / 15

Positioning Elements on a Web Page - PowerPoint PPT Presentation

  • Uploaded on

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.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about ' Positioning Elements on a Web Page' - davin

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

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

  • 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

  • Fixed: is locked into place on the screen HTML flow

    • 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 HTML flow

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

  • You can also use negative positioning HTML flow

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

top: 50px; HTML flow

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 HTML flow

  • 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 HTML flow

  • 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 HTML flow

  • 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
z-Index HTML flow

  • 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 HTML flow

  • 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 HTML flow

  • Use sparingly

  • Impossible to predict

  • Provides exact placement for specific elements.

Using css positioning for page layout
Using CSS Positioning for Page Layout HTML flow

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

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