SlideShare a Scribd company logo
1 of 14
Types of CSS
P.Abinaya
Msc(cs)
 Stands for "Cascading Style Sheet." Cascading style
sheets are used to format the layout of Web pages.
They can be used to define text styles, table sizes,
and other aspects of Web pages that previously
could only be defined in a page's HTML.
 CSS helps Web developers create a uniform look
across several pages of a Web site.
Inline css
Internal css
External css
 inline styles is not as powerful as embedded style
sheets, imported style sheets, or linking to an
external style sheet. To specify style information
for more than one element, you should embed a
style sheet in the header of the HTML document.
 Syntax: <p style="color: #ff9900">This text has
been styled using inline style sheets.</p>
 The internal style sheet is used to add a unique style
for a single document. It is defined in <head> section
of the HTML page inside the <style> tag.
 <head> <title>Internal css</title> <style> selector{
Property:value; } </style> </title> </head>
 But in the Internal CSS, we can not control styles for
multiple documents at once.
Internal style Sheet is applicable to the Page in which
it is included.
Internal Style Sheet is used to style individual page.
 An external style sheet is a separate file where you
can declare all the styles that you want to use on
your website. You then link to the external style
sheet from all your HTML pages.
 This means you only need to set the styles for each
element once. If you want to update the style of
your website, you only need to do it in one place.
 The position CSS property sets how an element is
positioned in a document. The top , right ,
bottom , and left properties determine the final
location of positiA positioned element is an
element whose computed position value is either
relative, absolute, fixed, or sticky. (In other words,
it's anything except static.)oned elements.
Fixed
Static
Relative
Absolute
Sticky
 The element is removed from the normal document
flow, and no space is created for the element in the
page layout. It is positioned relative to the initial
containing block established by the viewport, except
when one of its ancestors has a transform, perspective,
or filter property set to something other than none
(see the CSS Transforms Spec), in which case that
ancestor behaves as the containing block.
 The element is positioned according to the normal
flow of the document. The top, right, bottom, left, and
z-index properties have no effect. This is the default
value.
 The element is positioned according to the normal
flow of the document, and then offset relative to itself
based on the values of top, right, bottom, and left. The
offset does not affect the position of any other
elements;
 thus, the space given for the element in the page
layout is the same as if position were static. This value
creates a new stacking context when the value of z-
index is not auto. Its effect on table-*-group, table-row,
table-column, table-cell, and table-caption elements is
undefined.
 The element is removed from the normal document
flow, and no space is created for the element in the
page layout. It is positioned relative to its closest
positioned ancestor, if any; otherwise, it is placed
relative to the initial containing block. Its final
position is determined by the values of top, right,
bottom, and left.
 This value creates a new stacking context when the
value of z-index is not auto. The margins of absolutely
positioned boxes do not collapse with other margins.
 The element is positioned according to the normal
flow of the document, and then offset relative to
its nearest scrolling ancestor and containing block
(nearest block-level ancestor), including table-
related elements, based on the values of top, right,
bottom, and left. The offset does not affect the
position of any other elements.
WEB PROGRAMMING ANALYSIS

More Related Content

What's hot

docs+lists - software specification tool
docs+lists - software specification tooldocs+lists - software specification tool
docs+lists - software specification toolAndreasKleffel
 
Session on common html table
Session on common html tableSession on common html table
Session on common html tableRahul Kumar
 
CSS_Day_Two (W3schools)
CSS_Day_Two (W3schools)CSS_Day_Two (W3schools)
CSS_Day_Two (W3schools)Rafi Haidari
 
CSS_Day_ONE (W3schools)
CSS_Day_ONE (W3schools)CSS_Day_ONE (W3schools)
CSS_Day_ONE (W3schools)Rafi Haidari
 
CSS Positioning and Features of CSS3
CSS Positioning and Features of CSS3CSS Positioning and Features of CSS3
CSS Positioning and Features of CSS3Jaimin Brahmbhatt
 
CSS_Day_Three (W3schools)
CSS_Day_Three (W3schools)CSS_Day_Three (W3schools)
CSS_Day_Three (W3schools)Rafi Haidari
 
Web Development 1 (HTML & CSS)
Web Development 1 (HTML & CSS)Web Development 1 (HTML & CSS)
Web Development 1 (HTML & CSS)ghayour abbas
 

What's hot (8)

docs+lists - software specification tool
docs+lists - software specification tooldocs+lists - software specification tool
docs+lists - software specification tool
 
Session on common html table
Session on common html tableSession on common html table
Session on common html table
 
CSS_Day_Two (W3schools)
CSS_Day_Two (W3schools)CSS_Day_Two (W3schools)
CSS_Day_Two (W3schools)
 
CSS
CSSCSS
CSS
 
CSS_Day_ONE (W3schools)
CSS_Day_ONE (W3schools)CSS_Day_ONE (W3schools)
CSS_Day_ONE (W3schools)
 
CSS Positioning and Features of CSS3
CSS Positioning and Features of CSS3CSS Positioning and Features of CSS3
CSS Positioning and Features of CSS3
 
CSS_Day_Three (W3schools)
CSS_Day_Three (W3schools)CSS_Day_Three (W3schools)
CSS_Day_Three (W3schools)
 
Web Development 1 (HTML & CSS)
Web Development 1 (HTML & CSS)Web Development 1 (HTML & CSS)
Web Development 1 (HTML & CSS)
 

Similar to WEB PROGRAMMING ANALYSIS

Similar to WEB PROGRAMMING ANALYSIS (20)

Css from scratch
Css from scratchCss from scratch
Css from scratch
 
Lecture2 CSS 3
Lecture2   CSS 3Lecture2   CSS 3
Lecture2 CSS 3
 
How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksHow Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) Works
 
Cascading style sheet
Cascading style sheetCascading style sheet
Cascading style sheet
 
Web Programming Basic topic.pptx
Web Programming Basic topic.pptxWeb Programming Basic topic.pptx
Web Programming Basic topic.pptx
 
CSS
CSSCSS
CSS
 
Week7
Week7Week7
Week7
 
Week7
Week7Week7
Week7
 
Web topic 17 font family in css
Web topic 17  font family in cssWeb topic 17  font family in css
Web topic 17 font family in css
 
3.2 introduction to css
3.2 introduction to css3.2 introduction to css
3.2 introduction to css
 
3.2 introduction to css
3.2 introduction to css3.2 introduction to css
3.2 introduction to css
 
Art of css
Art of cssArt of css
Art of css
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
 
CSS Positioning
CSS PositioningCSS Positioning
CSS Positioning
 
Web Programming-css.pptx
Web Programming-css.pptxWeb Programming-css.pptx
Web Programming-css.pptx
 
Css jon duckett - flashcards
Css   jon duckett - flashcardsCss   jon duckett - flashcards
Css jon duckett - flashcards
 
Css Positioning Elements
Css Positioning ElementsCss Positioning Elements
Css Positioning Elements
 
Designing for the web - 101
Designing for the web - 101Designing for the web - 101
Designing for the web - 101
 
Basic css
Basic cssBasic css
Basic css
 
Html-Prabakaran
Html-PrabakaranHtml-Prabakaran
Html-Prabakaran
 

More from sweetysweety8

Artificial neural network
Artificial neural networkArtificial neural network
Artificial neural networksweetysweety8
 
Software engineering
Software engineeringSoftware engineering
Software engineeringsweetysweety8
 
Software engineering
Software engineeringSoftware engineering
Software engineeringsweetysweety8
 
Software engineering
Software engineeringSoftware engineering
Software engineeringsweetysweety8
 
Software engineering
Software engineeringSoftware engineering
Software engineeringsweetysweety8
 
WEB PROGRAMMING ANALYSIS
WEB PROGRAMMING ANALYSISWEB PROGRAMMING ANALYSIS
WEB PROGRAMMING ANALYSISsweetysweety8
 
Relational Database Management System
Relational Database Management SystemRelational Database Management System
Relational Database Management Systemsweetysweety8
 
Relational Database Management System
Relational Database Management SystemRelational Database Management System
Relational Database Management Systemsweetysweety8
 
Relational Database Management System
Relational Database Management SystemRelational Database Management System
Relational Database Management Systemsweetysweety8
 

More from sweetysweety8 (20)

Artificial neural network
Artificial neural networkArtificial neural network
Artificial neural network
 
Compiler Design
Compiler DesignCompiler Design
Compiler Design
 
Software engineering
Software engineeringSoftware engineering
Software engineering
 
Software engineering
Software engineeringSoftware engineering
Software engineering
 
Software engineering
Software engineeringSoftware engineering
Software engineering
 
Software engineering
Software engineeringSoftware engineering
Software engineering
 
Compiler Design
Compiler DesignCompiler Design
Compiler Design
 
WEB PROGRAMMING ANALYSIS
WEB PROGRAMMING ANALYSISWEB PROGRAMMING ANALYSIS
WEB PROGRAMMING ANALYSIS
 
WEB PROGRAMMING
WEB PROGRAMMINGWEB PROGRAMMING
WEB PROGRAMMING
 
Bigdata
BigdataBigdata
Bigdata
 
BIG DATA ANALYTICS
BIG DATA ANALYTICSBIG DATA ANALYTICS
BIG DATA ANALYTICS
 
BIG DATA ANALYTICS
BIG DATA ANALYTICSBIG DATA ANALYTICS
BIG DATA ANALYTICS
 
Compiler Design
Compiler DesignCompiler Design
Compiler Design
 
WEB PROGRAMMING
WEB PROGRAMMINGWEB PROGRAMMING
WEB PROGRAMMING
 
BIG DATA ANALYTICS
BIG DATA ANALYTICSBIG DATA ANALYTICS
BIG DATA ANALYTICS
 
Data mining
Data miningData mining
Data mining
 
Operating System
Operating SystemOperating System
Operating System
 
Relational Database Management System
Relational Database Management SystemRelational Database Management System
Relational Database Management System
 
Relational Database Management System
Relational Database Management SystemRelational Database Management System
Relational Database Management System
 
Relational Database Management System
Relational Database Management SystemRelational Database Management System
Relational Database Management System
 

Recently uploaded

Presentation on Engagement in Book Clubs
Presentation on Engagement in Book ClubsPresentation on Engagement in Book Clubs
Presentation on Engagement in Book Clubssamaasim06
 
Call Girl Number in Khar Mumbai📲 9892124323 💞 Full Night Enjoy
Call Girl Number in Khar Mumbai📲 9892124323 💞 Full Night EnjoyCall Girl Number in Khar Mumbai📲 9892124323 💞 Full Night Enjoy
Call Girl Number in Khar Mumbai📲 9892124323 💞 Full Night EnjoyPooja Nehwal
 
Microsoft Copilot AI for Everyone - created by AI
Microsoft Copilot AI for Everyone - created by AIMicrosoft Copilot AI for Everyone - created by AI
Microsoft Copilot AI for Everyone - created by AITatiana Gurgel
 
George Lever - eCommerce Day Chile 2024
George Lever -  eCommerce Day Chile 2024George Lever -  eCommerce Day Chile 2024
George Lever - eCommerce Day Chile 2024eCommerce Institute
 
WhatsApp 📞 9892124323 ✅Call Girls In Juhu ( Mumbai )
WhatsApp 📞 9892124323 ✅Call Girls In Juhu ( Mumbai )WhatsApp 📞 9892124323 ✅Call Girls In Juhu ( Mumbai )
WhatsApp 📞 9892124323 ✅Call Girls In Juhu ( Mumbai )Pooja Nehwal
 
ANCHORING SCRIPT FOR A CULTURAL EVENT.docx
ANCHORING SCRIPT FOR A CULTURAL EVENT.docxANCHORING SCRIPT FOR A CULTURAL EVENT.docx
ANCHORING SCRIPT FOR A CULTURAL EVENT.docxNikitaBankoti2
 
Introduction to Prompt Engineering (Focusing on ChatGPT)
Introduction to Prompt Engineering (Focusing on ChatGPT)Introduction to Prompt Engineering (Focusing on ChatGPT)
Introduction to Prompt Engineering (Focusing on ChatGPT)Chameera Dedduwage
 
Thirunelveli call girls Tamil escorts 7877702510
Thirunelveli call girls Tamil escorts 7877702510Thirunelveli call girls Tamil escorts 7877702510
Thirunelveli call girls Tamil escorts 7877702510Vipesco
 
CTAC 2024 Valencia - Henrik Hanke - Reduce to the max - slideshare.pdf
CTAC 2024 Valencia - Henrik Hanke - Reduce to the max - slideshare.pdfCTAC 2024 Valencia - Henrik Hanke - Reduce to the max - slideshare.pdf
CTAC 2024 Valencia - Henrik Hanke - Reduce to the max - slideshare.pdfhenrik385807
 
Re-membering the Bard: Revisiting The Compleat Wrks of Wllm Shkspr (Abridged)...
Re-membering the Bard: Revisiting The Compleat Wrks of Wllm Shkspr (Abridged)...Re-membering the Bard: Revisiting The Compleat Wrks of Wllm Shkspr (Abridged)...
Re-membering the Bard: Revisiting The Compleat Wrks of Wllm Shkspr (Abridged)...Hasting Chen
 
Chiulli_Aurora_Oman_Raffaele_Beowulf.pptx
Chiulli_Aurora_Oman_Raffaele_Beowulf.pptxChiulli_Aurora_Oman_Raffaele_Beowulf.pptx
Chiulli_Aurora_Oman_Raffaele_Beowulf.pptxraffaeleoman
 
SaaStr Workshop Wednesday w/ Lucas Price, Yardstick
SaaStr Workshop Wednesday w/ Lucas Price, YardstickSaaStr Workshop Wednesday w/ Lucas Price, Yardstick
SaaStr Workshop Wednesday w/ Lucas Price, Yardsticksaastr
 
If this Giant Must Walk: A Manifesto for a New Nigeria
If this Giant Must Walk: A Manifesto for a New NigeriaIf this Giant Must Walk: A Manifesto for a New Nigeria
If this Giant Must Walk: A Manifesto for a New NigeriaKayode Fayemi
 
CTAC 2024 Valencia - Sven Zoelle - Most Crucial Invest to Digitalisation_slid...
CTAC 2024 Valencia - Sven Zoelle - Most Crucial Invest to Digitalisation_slid...CTAC 2024 Valencia - Sven Zoelle - Most Crucial Invest to Digitalisation_slid...
CTAC 2024 Valencia - Sven Zoelle - Most Crucial Invest to Digitalisation_slid...henrik385807
 
BDSM⚡Call Girls in Sector 93 Noida Escorts >༒8448380779 Escort Service
BDSM⚡Call Girls in Sector 93 Noida Escorts >༒8448380779 Escort ServiceBDSM⚡Call Girls in Sector 93 Noida Escorts >༒8448380779 Escort Service
BDSM⚡Call Girls in Sector 93 Noida Escorts >༒8448380779 Escort ServiceDelhi Call girls
 
VVIP Call Girls Nalasopara : 9892124323, Call Girls in Nalasopara Services
VVIP Call Girls Nalasopara : 9892124323, Call Girls in Nalasopara ServicesVVIP Call Girls Nalasopara : 9892124323, Call Girls in Nalasopara Services
VVIP Call Girls Nalasopara : 9892124323, Call Girls in Nalasopara ServicesPooja Nehwal
 
Night 7k Call Girls Noida Sector 128 Call Me: 8448380779
Night 7k Call Girls Noida Sector 128 Call Me: 8448380779Night 7k Call Girls Noida Sector 128 Call Me: 8448380779
Night 7k Call Girls Noida Sector 128 Call Me: 8448380779Delhi Call girls
 
Governance and Nation-Building in Nigeria: Some Reflections on Options for Po...
Governance and Nation-Building in Nigeria: Some Reflections on Options for Po...Governance and Nation-Building in Nigeria: Some Reflections on Options for Po...
Governance and Nation-Building in Nigeria: Some Reflections on Options for Po...Kayode Fayemi
 
Mohammad_Alnahdi_Oral_Presentation_Assignment.pptx
Mohammad_Alnahdi_Oral_Presentation_Assignment.pptxMohammad_Alnahdi_Oral_Presentation_Assignment.pptx
Mohammad_Alnahdi_Oral_Presentation_Assignment.pptxmohammadalnahdi22
 
No Advance 8868886958 Chandigarh Call Girls , Indian Call Girls For Full Nigh...
No Advance 8868886958 Chandigarh Call Girls , Indian Call Girls For Full Nigh...No Advance 8868886958 Chandigarh Call Girls , Indian Call Girls For Full Nigh...
No Advance 8868886958 Chandigarh Call Girls , Indian Call Girls For Full Nigh...Sheetaleventcompany
 

Recently uploaded (20)

Presentation on Engagement in Book Clubs
Presentation on Engagement in Book ClubsPresentation on Engagement in Book Clubs
Presentation on Engagement in Book Clubs
 
Call Girl Number in Khar Mumbai📲 9892124323 💞 Full Night Enjoy
Call Girl Number in Khar Mumbai📲 9892124323 💞 Full Night EnjoyCall Girl Number in Khar Mumbai📲 9892124323 💞 Full Night Enjoy
Call Girl Number in Khar Mumbai📲 9892124323 💞 Full Night Enjoy
 
Microsoft Copilot AI for Everyone - created by AI
Microsoft Copilot AI for Everyone - created by AIMicrosoft Copilot AI for Everyone - created by AI
Microsoft Copilot AI for Everyone - created by AI
 
George Lever - eCommerce Day Chile 2024
George Lever -  eCommerce Day Chile 2024George Lever -  eCommerce Day Chile 2024
George Lever - eCommerce Day Chile 2024
 
WhatsApp 📞 9892124323 ✅Call Girls In Juhu ( Mumbai )
WhatsApp 📞 9892124323 ✅Call Girls In Juhu ( Mumbai )WhatsApp 📞 9892124323 ✅Call Girls In Juhu ( Mumbai )
WhatsApp 📞 9892124323 ✅Call Girls In Juhu ( Mumbai )
 
ANCHORING SCRIPT FOR A CULTURAL EVENT.docx
ANCHORING SCRIPT FOR A CULTURAL EVENT.docxANCHORING SCRIPT FOR A CULTURAL EVENT.docx
ANCHORING SCRIPT FOR A CULTURAL EVENT.docx
 
Introduction to Prompt Engineering (Focusing on ChatGPT)
Introduction to Prompt Engineering (Focusing on ChatGPT)Introduction to Prompt Engineering (Focusing on ChatGPT)
Introduction to Prompt Engineering (Focusing on ChatGPT)
 
Thirunelveli call girls Tamil escorts 7877702510
Thirunelveli call girls Tamil escorts 7877702510Thirunelveli call girls Tamil escorts 7877702510
Thirunelveli call girls Tamil escorts 7877702510
 
CTAC 2024 Valencia - Henrik Hanke - Reduce to the max - slideshare.pdf
CTAC 2024 Valencia - Henrik Hanke - Reduce to the max - slideshare.pdfCTAC 2024 Valencia - Henrik Hanke - Reduce to the max - slideshare.pdf
CTAC 2024 Valencia - Henrik Hanke - Reduce to the max - slideshare.pdf
 
Re-membering the Bard: Revisiting The Compleat Wrks of Wllm Shkspr (Abridged)...
Re-membering the Bard: Revisiting The Compleat Wrks of Wllm Shkspr (Abridged)...Re-membering the Bard: Revisiting The Compleat Wrks of Wllm Shkspr (Abridged)...
Re-membering the Bard: Revisiting The Compleat Wrks of Wllm Shkspr (Abridged)...
 
Chiulli_Aurora_Oman_Raffaele_Beowulf.pptx
Chiulli_Aurora_Oman_Raffaele_Beowulf.pptxChiulli_Aurora_Oman_Raffaele_Beowulf.pptx
Chiulli_Aurora_Oman_Raffaele_Beowulf.pptx
 
SaaStr Workshop Wednesday w/ Lucas Price, Yardstick
SaaStr Workshop Wednesday w/ Lucas Price, YardstickSaaStr Workshop Wednesday w/ Lucas Price, Yardstick
SaaStr Workshop Wednesday w/ Lucas Price, Yardstick
 
If this Giant Must Walk: A Manifesto for a New Nigeria
If this Giant Must Walk: A Manifesto for a New NigeriaIf this Giant Must Walk: A Manifesto for a New Nigeria
If this Giant Must Walk: A Manifesto for a New Nigeria
 
CTAC 2024 Valencia - Sven Zoelle - Most Crucial Invest to Digitalisation_slid...
CTAC 2024 Valencia - Sven Zoelle - Most Crucial Invest to Digitalisation_slid...CTAC 2024 Valencia - Sven Zoelle - Most Crucial Invest to Digitalisation_slid...
CTAC 2024 Valencia - Sven Zoelle - Most Crucial Invest to Digitalisation_slid...
 
BDSM⚡Call Girls in Sector 93 Noida Escorts >༒8448380779 Escort Service
BDSM⚡Call Girls in Sector 93 Noida Escorts >༒8448380779 Escort ServiceBDSM⚡Call Girls in Sector 93 Noida Escorts >༒8448380779 Escort Service
BDSM⚡Call Girls in Sector 93 Noida Escorts >༒8448380779 Escort Service
 
VVIP Call Girls Nalasopara : 9892124323, Call Girls in Nalasopara Services
VVIP Call Girls Nalasopara : 9892124323, Call Girls in Nalasopara ServicesVVIP Call Girls Nalasopara : 9892124323, Call Girls in Nalasopara Services
VVIP Call Girls Nalasopara : 9892124323, Call Girls in Nalasopara Services
 
Night 7k Call Girls Noida Sector 128 Call Me: 8448380779
Night 7k Call Girls Noida Sector 128 Call Me: 8448380779Night 7k Call Girls Noida Sector 128 Call Me: 8448380779
Night 7k Call Girls Noida Sector 128 Call Me: 8448380779
 
Governance and Nation-Building in Nigeria: Some Reflections on Options for Po...
Governance and Nation-Building in Nigeria: Some Reflections on Options for Po...Governance and Nation-Building in Nigeria: Some Reflections on Options for Po...
Governance and Nation-Building in Nigeria: Some Reflections on Options for Po...
 
Mohammad_Alnahdi_Oral_Presentation_Assignment.pptx
Mohammad_Alnahdi_Oral_Presentation_Assignment.pptxMohammad_Alnahdi_Oral_Presentation_Assignment.pptx
Mohammad_Alnahdi_Oral_Presentation_Assignment.pptx
 
No Advance 8868886958 Chandigarh Call Girls , Indian Call Girls For Full Nigh...
No Advance 8868886958 Chandigarh Call Girls , Indian Call Girls For Full Nigh...No Advance 8868886958 Chandigarh Call Girls , Indian Call Girls For Full Nigh...
No Advance 8868886958 Chandigarh Call Girls , Indian Call Girls For Full Nigh...
 

WEB PROGRAMMING ANALYSIS

  • 2.  Stands for "Cascading Style Sheet." Cascading style sheets are used to format the layout of Web pages. They can be used to define text styles, table sizes, and other aspects of Web pages that previously could only be defined in a page's HTML.  CSS helps Web developers create a uniform look across several pages of a Web site.
  • 4.  inline styles is not as powerful as embedded style sheets, imported style sheets, or linking to an external style sheet. To specify style information for more than one element, you should embed a style sheet in the header of the HTML document.  Syntax: <p style="color: #ff9900">This text has been styled using inline style sheets.</p>
  • 5.  The internal style sheet is used to add a unique style for a single document. It is defined in <head> section of the HTML page inside the <style> tag.  <head> <title>Internal css</title> <style> selector{ Property:value; } </style> </title> </head>  But in the Internal CSS, we can not control styles for multiple documents at once. Internal style Sheet is applicable to the Page in which it is included. Internal Style Sheet is used to style individual page.
  • 6.  An external style sheet is a separate file where you can declare all the styles that you want to use on your website. You then link to the external style sheet from all your HTML pages.  This means you only need to set the styles for each element once. If you want to update the style of your website, you only need to do it in one place.
  • 7.  The position CSS property sets how an element is positioned in a document. The top , right , bottom , and left properties determine the final location of positiA positioned element is an element whose computed position value is either relative, absolute, fixed, or sticky. (In other words, it's anything except static.)oned elements.
  • 9.  The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block.
  • 10.  The element is positioned according to the normal flow of the document. The top, right, bottom, left, and z-index properties have no effect. This is the default value.
  • 11.  The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements;  thus, the space given for the element in the page layout is the same as if position were static. This value creates a new stacking context when the value of z- index is not auto. Its effect on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.
  • 12.  The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.  This value creates a new stacking context when the value of z-index is not auto. The margins of absolutely positioned boxes do not collapse with other margins.
  • 13.  The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table- related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.