CSS

1. CSS Home 2. CSS Introduction 3. CSS Versions 4. CSS Extension 5. Adv.& Disadv of CSS 6. HTML v/s CSS 7. CSS Syntax 8. CSS Selector 9. Inserting CSS file 10. Class 11. ID 12. Div 13. Font 14. Font-size 15. Font-weight 16. Font-style 17. Font-variant 18. Text 19. Text-color 20. Text-decoration 21. Text-transform 22. Text-indent 23. CSS Color 24. Web Safe Color 25. Background-image 26. Background-repeat 27. Background-position 28. Background-attachment 29. Background-size 30. Background-origin 31. CSS Box Model 32. Padding 33. Padding-top 34. Padding-right 35. Padding-bottom 36. Padding-left 37. Margin 38. Margin-top 39. Margin-right 40. Margin-bottom 41. Margin-left 42. Margin Demonstration 43. Border 44. Border-style 45. Different Border-style 46. Border-width 47. Different Border-width 48. Border-color 49. Border-radius 50. Border-collapse 51. Border-spacing 52. Border-image 53. Border-bottom 54. Border-bottom-style 55. Border-bottom-width 56. Border-bottom-color 57. Border-bottom-left-radius 58. Border-bottom-right-radius 59. Border-top 60. Border-top-style 61. Border-top-width 62. Border-top-color 63. Border-top-left-radius 64. Border-top-right-radius 65. Border-right 66. Border-right-style 67. Border-right-width 68. Border-right-color 69. Border-left 70. Border-left-style 71. Border-left-width 72. Border-left-color 73. Ex.Padding,Border,Margin 74. List Style 75. List Style-type 76. List Style-position 77. List Style-image 78. Dimension Properties 79. Width 80. Max-width 81. Min-width 82. Height 83. Max-height 84. Min-height 85. Grouping Selector 86. Nesting Selector 87. Floating 88. Position 89. Pseudo Element 90. First-letter Pseudo 91. First-line-Pseudo 92. Before & After Pseudo 93. Pseudo-class Selector 94. tag 95. Image Gallery 96. Scrollbars 97. Display Property 98. Cursor Property 99. Caption-side Property 100. Transform Property 101. Interview Question and Answer part 1 102. Interview Question and Answer part 2 103. Interview Question and Answer part 3 104. Interview Question and Answer part 4 105. Interview Question and Answer part 5 106. Interview Question and Answer part 6 107. Interview Question and Answer part 7 108. Interview Question and Answer part 8
Pr.Pg Next Pg

CSS position tutorials

  • The CSS position property changes how elements are positioned on your webpage.

  • CSS provides several methods for positioning elements on the page.

  • They can be positioned relative to where they would normally appear in the flow, or removed from the flow altogether and placed at a particular spot on the page.

  • You can also position an element relative to the browser window and it will stay put while the rest of the page scrolls.

  • Unfortunately, not all positioning methods are well supported to all major browsers.

  • The position property indicates that an element is to be positioned, and specifies which positioning method should be used.

 

Position: value

Description

Static

This is the normal positioning scheme in which elements are positioned as they occur in the normal document flow. This is default.

Relative

Relative positioning moves the box relative to its original position in the flow. The distinctive behavior of relative positioning is that the space the element would have occupied in the normal flow is preserved.

Absolute

Absolutely positioned elements are removed from the document flow entirely and positioned relative to a containing. Unlike relatively positioned elements, the space they would have occupied is closed up. In fact, they have no influence at all on the layout of surrounding elements.

Fixed

The distinguishing characteristic of fixed positioning is that the element stays in one position in the window even when the document scrolls.

 

 

 

CSS Version

CSS2

Default Value

Static

Inherited

No

JavaScript Syntax

object.style.position="relative"

Browser Supported

Ch-fox-ie-op-sa

Note

 

 


Static Positioning:

  • This is the normal positioning scheme in which elements are positioned as they occur in the normal document flow.

  • HTML elements are positioned static by default.

  • Static positioned elements are not affected by the top, bottom, left, and right properties.

 

Relative Positioning:

  • Relative positioning moves the box relative to its original position in the flow ie. The position a box will take if it is moved from its normal position.

  • We can use two values top and left along with position property to move an HTML element anywhere in HTML document. 

  • Here's a quick reference when moving HTML elements in CSS.

Move Left:         Use a negative value for left.

Move Right:       Use a positive value for left.

Move Up:           Use a negative value for top.

Move Down:       Use a positive value for top.

 

Example: Program to shows the use of CSS relative position.
Output:

 

Absolute Positioning:

  • An absolute position element is positioned relative to the first parent element that has a position other than static.

  • Absolutely positioned elements are removed from the document flow entirely and positioned relative to a containing

 

Example: Program example to shows the use of CSS absolute positioning
Output:

 

Fixed Positioning:

  • The fixed positioning is that the element stays in one position in the window even when the document scrolls.

  • You can use two values top and left along with position property to move an HTML element anywhere in HTML document. Here's a quick reference when moving HTML elements in CSS.

Move Left - Use a negative value for left.

Move Right - Use a positive value for left.

Move Up - Use a negative value for top.

Move Down - Use a positive value for top.

  • IE6 (Internet Explorer 6) 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 1.0, safari 1.0,etc.

 

Example: Program example to shows the use of CSS fixed positioning property
Output:
Pr.Pg border                                              Next Pg