Polly po-cket

p _ x
Bookmark Weezywap
Wednesday June 19th 2024
Always Post weezywap.xtgem.com on your facebook, twitter, 2go, whatsapp and instagram status! If you love WEEZYWAP and enjoy unlimited services here!
»Css Basics
You are viewing Chapter 17 of 18 Chapters for Css Basics/Tutorials. View all Chapters
Chapter 1: Introduction to CSS
Chapter 2: CSS Syntax
Chapter 3: CSS Classes
Chapter 4: CSS IDs
Chapter 5: CSS Divisions
Chapter 6: CSS Spans
Chapter 7: CSS Margins
Chapter 8: CSS Padding
Chapter 9: CSS Text Properties
Chapter 10: CSS Font Properties
Chapter 11: CSS Anchors, Links and Pseudo Classes
Chapter 12: CSS Backgrounds
Chapter 13: CSS Borders
Chapter 14: CSS Ordered & Unordered Lists
Chapter 15: CSS Width and Height Properties
Chapter 16: CSS Classification
Chapter 17: CSS Positioning
Chapter 18: CSS Pseudo Elements
Chapter 17: CSS Positioning

Inherited: No

The position property (as you may have guessed) changes how elements are positioned on your webpage.

position: value;



Now, what does all that mean?

Static positioning is by default the way an element will appear in the normal flow of your (X)HTML file. It is not necessary to declare a position of static. Doing so, is no different than not declaring it at all.

position: static;

Positioning an element relatively places the element in the normal flow of your (X)HTML file and then offsets it by some amount using the properties left, right, top and bottom. This may cause the element to overlap other elements that are on the page, which of course may be the effect that is required.

position: relative;

Positioning an element absolutely, removes the element from the normal flow of your (X)HTML file, and positions it to the top left of it's nearest parent element that has a position declared other than static. If no parent element with a position other than static exists then it will be positioned from the top left of the browser window.

position: absolute;

Positioning an element with the fixed value, is the same as absolute except the parent element is always the browser window. It makes no difference if the fixed element is nested inside other positioned elements.
Furthermore, an element that is positioned with a fixed value, will not scroll with the document. It will remain in it's position regardless of the scroll position of the page.
Internet Explorer does not support the fixed value for the positioning of an element. Thus it will not position fixed elements correctly and will still scroll with the page. To see this effect in action you will need to use a standards compliant browser, such as Firefox

position: fixed;

When positioning elements with relative, absolute or fixed values the following properties are used to offset the element:


position: absolute; top: 10px; right: 10px;
« PreviousJump to Chapter:
Next »

Copyright © 2024 WEEZYWAP
facebook twitter whatsapp google plus
Home | About Us | Advertise | Frequently Asked Question | Contact Us | Partners | Disclaimer | Terms of Services | Invite Friends | Credits

Online: 1 , Today: 7, Hits: 33241
Last modified: 19-01-2017 9:11:03 pm