This document provides an overview of CSS layout techniques including positioning, floating, opacity, visibility, and display. It discusses how to position elements using static, relative, absolute, and fixed positioning as well as how to offset positioned elements using top, bottom, left, and right. It also covers floating elements, clearing floats, and using z-index to control stacking order. The document reviews how to set opacity and visibility as well as the different display types like inline, block, and none. Finally, it provides examples of homework assignments to create web pages using these CSS layout skills.
The document discusses CSS layout techniques including positioning, floating, opacity, visibility, and display properties. It provides examples and definitions for each property and concept. Live demos are linked to demonstrate the code examples. The document concludes with homework assignments to create web pages using HTML and external CSS applying the layout techniques covered.
This document provides an overview of web design concepts including the box model, box sizing, positioning, and floats. It discusses how elements are displayed as block-level or inline-level based on their default display property values, and how the display property can be used to change an element's display. It also explains how the box model determines an element's size using width, height, padding, borders and margins. Additionally, it covers the box-sizing property and its content-box, border-box, and padding-box values and how they affect size calculation. The document concludes with a discussion of positioning content using floats and how to clear and contain floats.
This document provides a summary of Rachel Andrew's presentation on modern CSS layout techniques at CSS Conf Budapest 2016. It discusses some of the limitations of traditional layout methods like floats and frameworks, and expresses hope for new CSS specifications like Flexbox, Grid Layout, and Box Alignment that provide true separation of document structure and visual layout with precise alignment control. Key concepts covered include items understanding themselves as part of a complete layout, flexibility and responsiveness being inherent to these new methods, and the need for responsibility when reordering content visually.
This document summarizes various CSS concepts including grouping selectors, nesting selectors, CSS dimensions, display and visibility properties, positioning elements, overlapping elements using z-index, floats, and clearing floats. It provides examples for each concept and lists CSS properties related to dimensions, display, positioning, and floats.
The document discusses various CSS box model properties including positioning elements, floats, clearing floats, and the overflow property. It explains that every element is considered a rectangular box made up of content, padding, border, and margin. It also discusses the difference between block and inline elements and how the position property can make elements static, relative, absolute, or fixed.
This document provides an overview of CSS layout techniques including positioning, floating, opacity, visibility, and display. It discusses how to position elements using static, relative, absolute, and fixed positioning as well as how to offset positioned elements using top, bottom, left, and right. It also covers floating elements, clearing floats, and using z-index to control stacking order. The document reviews how to set opacity and visibility as well as the different display types like inline, block, and none. Finally, it provides examples of homework assignments to create web pages using these CSS layout skills.
The document discusses CSS layout techniques including positioning, floating, opacity, visibility, and display properties. It provides examples and definitions for each property and concept. Live demos are linked to demonstrate the code examples. The document concludes with homework assignments to create web pages using HTML and external CSS applying the layout techniques covered.
This document provides an overview of web design concepts including the box model, box sizing, positioning, and floats. It discusses how elements are displayed as block-level or inline-level based on their default display property values, and how the display property can be used to change an element's display. It also explains how the box model determines an element's size using width, height, padding, borders and margins. Additionally, it covers the box-sizing property and its content-box, border-box, and padding-box values and how they affect size calculation. The document concludes with a discussion of positioning content using floats and how to clear and contain floats.
This document provides a summary of Rachel Andrew's presentation on modern CSS layout techniques at CSS Conf Budapest 2016. It discusses some of the limitations of traditional layout methods like floats and frameworks, and expresses hope for new CSS specifications like Flexbox, Grid Layout, and Box Alignment that provide true separation of document structure and visual layout with precise alignment control. Key concepts covered include items understanding themselves as part of a complete layout, flexibility and responsiveness being inherent to these new methods, and the need for responsibility when reordering content visually.
This document summarizes various CSS concepts including grouping selectors, nesting selectors, CSS dimensions, display and visibility properties, positioning elements, overlapping elements using z-index, floats, and clearing floats. It provides examples for each concept and lists CSS properties related to dimensions, display, positioning, and floats.
The document discusses various CSS box model properties including positioning elements, floats, clearing floats, and the overflow property. It explains that every element is considered a rectangular box made up of content, padding, border, and margin. It also discusses the difference between block and inline elements and how the position property can make elements static, relative, absolute, or fixed.
This CSS tutorial document provides information on CSS syntax, selectors, and properties for styling HTML elements. It discusses using CSS for text formatting, backgrounds, borders, positioning, and navigation bars. CSS allows control over color, fonts, size, spacing and layout of HTML elements to define how they are displayed on a webpage.
CSS (Cascading Style Sheets) allows separation of document content from page layout/presentation. CSS was introduced to make web page design and modification easier. CSS properties control elements like text formatting, page layout, and color/images. CSS rules cascade from broad to specific with author styles overriding browser defaults. Common selectors target elements by ID, class, tag name or relationship.
This document provides an overview of Cascading Style Sheets (CSS) including what CSS is, how it works, the different sources of styles, CSS selectors, properties, positioning, and inheritance. CSS allows separation of document content from page layout and styles, making web page design and maintenance easier. Styles defined in CSS rules cascade from broad to specific and can come from author styles, user stylesheets, or browser defaults.
The document discusses various CSS concepts including:
- Three ways to add style rules: inline, embedded, and external style sheets
- Positioning elements using static, relative, absolute and fixed positioning
- The box model which describes the content, padding, border, and margin areas of elements
- Floating elements and using the clear property to control floating behavior
- The overflow property and its values of visible, hidden, scroll, and auto
This presentation exemplifies the various ways to create a box model in a web page. Therefore, students and learners were ablt to adapt the different learning from this lesson from the 2nd Quarter. Thus, a more effective and clear explanation of the topic may enhance the learners' understanding and comprehension.
This document provides information about using the JavaScript InfoVis Toolkit (JIT) for data visualization. It discusses feeding JSON tree structure data to JIT visualizations, using controllers to customize visualizations, and exploring different visualization types including treemaps, sunbursts, icicles, and more. It also provides instructions for implementing a basic visualization with JIT by creating the data, HTML, JavaScript, and CSS files needed.
Flexbox and Grid Layout: How you will structure layouts tomorrow.Diego Eis
This document discusses Flexbox and Grid Layout for building responsive web page layouts. It provides an overview of Flexbox properties like flex-direction, justify-content, and align-items that control the layout of child elements within a flex container. It also covers Grid Layout and properties like grid-template-rows/columns that define the structure of rows and columns, and grid-area that positions elements within the grid. Examples and code snippets are provided to illustrate how Flexbox and Grid Layout can be used to create responsive page layouts in a semantic and flexible way.
This document summarizes a talk given by Rachel Andrew on new CSS layout methods Flexbox and Grid Layout. It discusses some of the challenges with traditional layout techniques and how Flexbox and Grid Layout allow for more semantic, flexible and responsive layouts by treating items as parts of a complete layout. Key features covered include separation of document structure from visual presentation, precise control of horizontal and vertical alignment, and responsive design being built into the new specifications.
The document outlines the requirements and topics to be covered in an Android training, including developing layouts using XML and Java, running and debugging Android applications, using intents and bundles to pass data between activities, and handling basic data storage using SQLite and memory management. It also provides references and questions for trainees to refer to for more information on Android development concepts and best practices.
Flexbox is a CSS layout mode that allows elements to be arranged and aligned in an intelligent and space efficient way. It lets items flex and expand to fill additional space, shrink to fit into smaller spaces, and rearrange themselves depending on screen size and device orientation. Some key aspects of flexbox include the flex container, flex items, main and cross axes, flex direction, justify and align content, flex wrap, and flex grow/shrink properties.
Object Diagrams Terms & Concepts, Object Diagram, Common Properties, graphical contents that are a projection into a model, Contents, Objects, links, Object structure, Common Modeling Techniques, Object Diagrams Hints & Tips
- AtomicDB uses a vector space model to represent data as interconnected informational elements at the center of their relationship universes, allowing each data item to act as an entry point into the network.
- Associations in AtomicDB are bidirectional references between data items, with no separate connector or predicate items. The algorithm that determines associations is entirely fact-based.
- Large datasets can be distributed across multiple servers by mapping data element tokens to different physical locations on contingent high-bandwidth networks.
This document provides an overview of HTML and CSS topics including:
- A brief history of HTML and CSS standards from 1990 to present.
- Descriptions of common HTML elements like <body>, <head>, <img>, <a>, and lists.
- Explanations of CSS concepts like selectors, properties, units, positioning, and layout fundamentals.
- Details on CSS topics like the box model, centering content, semantic HTML, and flexbox.
The document serves as a course outline or reference for learning HTML and CSS fundamentals.
This document provides an overview of CSS (Cascading Style Sheets) for computer science students. It discusses the background and goals of CSS, including making it easy to update many pages at once and maintain consistency. It also covers how CSS works through rules, selectors, and the cascade to match rules to elements. The document then summarizes visual formatting techniques in CSS like fonts, colors, positioning, and the box model. It concludes with techniques for dual presentation to support browsers with and without CSS.
1. The document discusses the structure and usage of contexts in Web Dynpro controllers. Contexts are hierarchical data storage structures that hold runtime data for the lifespan of a controller.
2. Contexts are constructed from nodes and attributes at design time. At runtime, nodes become collections that can contain multiple elements. Singleton nodes ensure efficient data access by only loading child node data when needed.
3. Context mapping allows controllers to access each other's context data, sharing it without copying. Internal mapping refers to a mapping within a single component.
This document discusses controlling the display, positioning, and floating of elements using CSS. It covers the display property for controlling element visibility, the position property for positioning elements relative to the page or other elements, and the float property for floating elements left or right. Specific values for these properties are defined, such as "inline" or "block" for display, "absolute" or "relative" for position, and "left" or "right" for float. Syntax examples are also provided.
This document discusses HTML elements and CSS positioning properties. It covers common HTML elements like classes, IDs, semantic elements, and entities. It also covers the CSS position property and its values - static, relative, fixed, absolute, and sticky. For each position value, it provides an example of how elements are positioned and the behavior of top, bottom, left, and right properties depending on the position value.
This document discusses HTML elements and CSS positioning properties. It covers common HTML elements like classes, IDs, semantic elements, and entities. It also covers the CSS position property and its values - static, relative, fixed, absolute, and sticky. For each position value, it provides an example of how elements are positioned and the behavior of top, bottom, left, and right properties depending on the position value.
Lerna is a tool that helps manage JavaScript projects with multiple packages. It allows developers to track changes across packages, manage versioning, and publish updates in a centralized way. By using Lerna with Conventional Commits, developers can solve common problems like tracking changes, versioning packages, and publishing updates in a lazy but effective manner without needing to set up infrastructure for each individual package.
Atomics in javascript might sound like a joke, but hi, we said the same thing about atomics with Donald Trump... anyways quite silently in 2017, JS got it access to Atomics API and shareable data structure, on this talk will explore Atomics API and what can we do with it.
Video: https://youtu.be/eF4RNebWioU
More Related Content
Similar to Fundamentals of Browser Rendering Css Overview PT 2
This CSS tutorial document provides information on CSS syntax, selectors, and properties for styling HTML elements. It discusses using CSS for text formatting, backgrounds, borders, positioning, and navigation bars. CSS allows control over color, fonts, size, spacing and layout of HTML elements to define how they are displayed on a webpage.
CSS (Cascading Style Sheets) allows separation of document content from page layout/presentation. CSS was introduced to make web page design and modification easier. CSS properties control elements like text formatting, page layout, and color/images. CSS rules cascade from broad to specific with author styles overriding browser defaults. Common selectors target elements by ID, class, tag name or relationship.
This document provides an overview of Cascading Style Sheets (CSS) including what CSS is, how it works, the different sources of styles, CSS selectors, properties, positioning, and inheritance. CSS allows separation of document content from page layout and styles, making web page design and maintenance easier. Styles defined in CSS rules cascade from broad to specific and can come from author styles, user stylesheets, or browser defaults.
The document discusses various CSS concepts including:
- Three ways to add style rules: inline, embedded, and external style sheets
- Positioning elements using static, relative, absolute and fixed positioning
- The box model which describes the content, padding, border, and margin areas of elements
- Floating elements and using the clear property to control floating behavior
- The overflow property and its values of visible, hidden, scroll, and auto
This presentation exemplifies the various ways to create a box model in a web page. Therefore, students and learners were ablt to adapt the different learning from this lesson from the 2nd Quarter. Thus, a more effective and clear explanation of the topic may enhance the learners' understanding and comprehension.
This document provides information about using the JavaScript InfoVis Toolkit (JIT) for data visualization. It discusses feeding JSON tree structure data to JIT visualizations, using controllers to customize visualizations, and exploring different visualization types including treemaps, sunbursts, icicles, and more. It also provides instructions for implementing a basic visualization with JIT by creating the data, HTML, JavaScript, and CSS files needed.
Flexbox and Grid Layout: How you will structure layouts tomorrow.Diego Eis
This document discusses Flexbox and Grid Layout for building responsive web page layouts. It provides an overview of Flexbox properties like flex-direction, justify-content, and align-items that control the layout of child elements within a flex container. It also covers Grid Layout and properties like grid-template-rows/columns that define the structure of rows and columns, and grid-area that positions elements within the grid. Examples and code snippets are provided to illustrate how Flexbox and Grid Layout can be used to create responsive page layouts in a semantic and flexible way.
This document summarizes a talk given by Rachel Andrew on new CSS layout methods Flexbox and Grid Layout. It discusses some of the challenges with traditional layout techniques and how Flexbox and Grid Layout allow for more semantic, flexible and responsive layouts by treating items as parts of a complete layout. Key features covered include separation of document structure from visual presentation, precise control of horizontal and vertical alignment, and responsive design being built into the new specifications.
The document outlines the requirements and topics to be covered in an Android training, including developing layouts using XML and Java, running and debugging Android applications, using intents and bundles to pass data between activities, and handling basic data storage using SQLite and memory management. It also provides references and questions for trainees to refer to for more information on Android development concepts and best practices.
Flexbox is a CSS layout mode that allows elements to be arranged and aligned in an intelligent and space efficient way. It lets items flex and expand to fill additional space, shrink to fit into smaller spaces, and rearrange themselves depending on screen size and device orientation. Some key aspects of flexbox include the flex container, flex items, main and cross axes, flex direction, justify and align content, flex wrap, and flex grow/shrink properties.
Object Diagrams Terms & Concepts, Object Diagram, Common Properties, graphical contents that are a projection into a model, Contents, Objects, links, Object structure, Common Modeling Techniques, Object Diagrams Hints & Tips
- AtomicDB uses a vector space model to represent data as interconnected informational elements at the center of their relationship universes, allowing each data item to act as an entry point into the network.
- Associations in AtomicDB are bidirectional references between data items, with no separate connector or predicate items. The algorithm that determines associations is entirely fact-based.
- Large datasets can be distributed across multiple servers by mapping data element tokens to different physical locations on contingent high-bandwidth networks.
This document provides an overview of HTML and CSS topics including:
- A brief history of HTML and CSS standards from 1990 to present.
- Descriptions of common HTML elements like <body>, <head>, <img>, <a>, and lists.
- Explanations of CSS concepts like selectors, properties, units, positioning, and layout fundamentals.
- Details on CSS topics like the box model, centering content, semantic HTML, and flexbox.
The document serves as a course outline or reference for learning HTML and CSS fundamentals.
This document provides an overview of CSS (Cascading Style Sheets) for computer science students. It discusses the background and goals of CSS, including making it easy to update many pages at once and maintain consistency. It also covers how CSS works through rules, selectors, and the cascade to match rules to elements. The document then summarizes visual formatting techniques in CSS like fonts, colors, positioning, and the box model. It concludes with techniques for dual presentation to support browsers with and without CSS.
1. The document discusses the structure and usage of contexts in Web Dynpro controllers. Contexts are hierarchical data storage structures that hold runtime data for the lifespan of a controller.
2. Contexts are constructed from nodes and attributes at design time. At runtime, nodes become collections that can contain multiple elements. Singleton nodes ensure efficient data access by only loading child node data when needed.
3. Context mapping allows controllers to access each other's context data, sharing it without copying. Internal mapping refers to a mapping within a single component.
This document discusses controlling the display, positioning, and floating of elements using CSS. It covers the display property for controlling element visibility, the position property for positioning elements relative to the page or other elements, and the float property for floating elements left or right. Specific values for these properties are defined, such as "inline" or "block" for display, "absolute" or "relative" for position, and "left" or "right" for float. Syntax examples are also provided.
This document discusses HTML elements and CSS positioning properties. It covers common HTML elements like classes, IDs, semantic elements, and entities. It also covers the CSS position property and its values - static, relative, fixed, absolute, and sticky. For each position value, it provides an example of how elements are positioned and the behavior of top, bottom, left, and right properties depending on the position value.
This document discusses HTML elements and CSS positioning properties. It covers common HTML elements like classes, IDs, semantic elements, and entities. It also covers the CSS position property and its values - static, relative, fixed, absolute, and sticky. For each position value, it provides an example of how elements are positioned and the behavior of top, bottom, left, and right properties depending on the position value.
Similar to Fundamentals of Browser Rendering Css Overview PT 2 (20)
Lerna is a tool that helps manage JavaScript projects with multiple packages. It allows developers to track changes across packages, manage versioning, and publish updates in a centralized way. By using Lerna with Conventional Commits, developers can solve common problems like tracking changes, versioning packages, and publishing updates in a lazy but effective manner without needing to set up infrastructure for each individual package.
Atomics in javascript might sound like a joke, but hi, we said the same thing about atomics with Donald Trump... anyways quite silently in 2017, JS got it access to Atomics API and shareable data structure, on this talk will explore Atomics API and what can we do with it.
Video: https://youtu.be/eF4RNebWioU
Service workers, they’re not the irritated staff employees in the hotel you stayed at on your last vacation, they’re actually one the of the sharpest tools in your modern web application Swiss knife!
Let's take a deep dive into the Service Workers API and its concepts!
code: https://github.com/barakd/service-worker-intro
Component Based Architecture (CBA) is the hottest buzz on the Front-End world. Not long ago it was the era of MVC. Why has the web shifted from MVC and what is CBA anyways? This talk will be mostly about concepts, but we will take Angular framework as a case study, and see it transition from MVW framework towards component based framework.
lecture video: https://youtu.be/JlyEZf4vBBY
Practical and conceptual overview of Javascript prototype paradigm, how to use prototypes, how do they work, and how do they differ from classes, and why there are no real classes in Javascript.
This document provides an overview of CSS Flexbox layout including:
1. Flexbox allows altering an item's width/height to best fit available space on any device.
2. Flexbox is direction-agnostic unlike block which is vertically-biased and inline which is horizontally-biased.
3. Flexbox is best for application components and small layouts, while Grid is for larger layouts.
Discover the benefits of outsourcing SEO to Indiadavidjhones387
"Discover the benefits of outsourcing SEO to India! From cost-effective services and expert professionals to round-the-clock work advantages, learn how your business can achieve digital success with Indian SEO solutions.
Instagram has become one of the most popular social media platforms, allowing people to share photos, videos, and stories with their followers. Sometimes, though, you might want to view someone's story without them knowing.
Ready to Unlock the Power of Blockchain!Toptal Tech
Imagine a world where data flows freely, yet remains secure. A world where trust is built into the fabric of every transaction. This is the promise of blockchain, a revolutionary technology poised to reshape our digital landscape.
Toptal Tech is at the forefront of this innovation, connecting you with the brightest minds in blockchain development. Together, we can unlock the potential of this transformative technology, building a future of transparency, security, and endless possibilities.
Gen Z and the marketplaces - let's translate their needsLaura Szabó
The product workshop focused on exploring the requirements of Generation Z in relation to marketplace dynamics. We delved into their specific needs, examined the specifics in their shopping preferences, and analyzed their preferred methods for accessing information and making purchases within a marketplace. Through the study of real-life cases , we tried to gain valuable insights into enhancing the marketplace experience for Generation Z.
The workshop was held on the DMA Conference in Vienna June 2024.
Understanding User Behavior with Google Analytics.pdfSEO Article Boost
Unlocking the full potential of Google Analytics is crucial for understanding and optimizing your website’s performance. This guide dives deep into the essential aspects of Google Analytics, from analyzing traffic sources to understanding user demographics and tracking user engagement.
Traffic Sources Analysis:
Discover where your website traffic originates. By examining the Acquisition section, you can identify whether visitors come from organic search, paid campaigns, direct visits, social media, or referral links. This knowledge helps in refining marketing strategies and optimizing resource allocation.
User Demographics Insights:
Gain a comprehensive view of your audience by exploring demographic data in the Audience section. Understand age, gender, and interests to tailor your marketing strategies effectively. Leverage this information to create personalized content and improve user engagement and conversion rates.
Tracking User Engagement:
Learn how to measure user interaction with your site through key metrics like bounce rate, average session duration, and pages per session. Enhance user experience by analyzing engagement metrics and implementing strategies to keep visitors engaged.
Conversion Rate Optimization:
Understand the importance of conversion rates and how to track them using Google Analytics. Set up Goals, analyze conversion funnels, segment your audience, and employ A/B testing to optimize your website for higher conversions. Utilize ecommerce tracking and multi-channel funnels for a detailed view of your sales performance and marketing channel contributions.
Custom Reports and Dashboards:
Create custom reports and dashboards to visualize and interpret data relevant to your business goals. Use advanced filters, segments, and visualization options to gain deeper insights. Incorporate custom dimensions and metrics for tailored data analysis. Integrate external data sources to enrich your analytics and make well-informed decisions.
This guide is designed to help you harness the power of Google Analytics for making data-driven decisions that enhance website performance and achieve your digital marketing objectives. Whether you are looking to improve SEO, refine your social media strategy, or boost conversion rates, understanding and utilizing Google Analytics is essential for your success.
Meet up Milano 14 _ Axpo Italia_ Migration from Mule3 (On-prem) to.pdfFlorence Consulting
Quattordicesimo Meetup di Milano, tenutosi a Milano il 23 Maggio 2024 dalle ore 17:00 alle ore 18:30 in presenza e da remoto.
Abbiamo parlato di come Axpo Italia S.p.A. ha ridotto il technical debt migrando le proprie APIs da Mule 3.9 a Mule 4.4 passando anche da on-premises a CloudHub 1.0.
3. Recap from our previous
session...
1. We discussed the browser rendering flow DOM + CSSOM => Render Tree => Layout =>
paint.
2. Each element is box.
3. It size is defined by it box-model, either (content-box or border-box).
4. We have a different types of boxes which affect element behaviour (inline, block, inline-
block, flex, none)
4. Today's Agenda
We now have to see, how can we define how elements are aligned together.
Floats
Positioning
Collapsing Margins
Z-index and elements visibility order (stacking context).
5. Float
The float CSS property specifies that an element should be taken from the normal flow and
placed along the left or right side of its container, where text and inline elements will wrap
around it.
A floating element is one where the computed value of float is not none.
(MDN)
6. Play Time - floats
https://plnkr.co/edit/Bz4hS2E9e
mkbr3fvts16?p=preview
Floats Tricky Parts
7. Float - summary
1. When an element is floated it is taken out of the normal flow of the document. It is shifted
to the left or right until it touches the edge of its containing box or another floated element.
2. Float elements must be given explicit width, otherwise unexpected behavior could occur.
3. Non-positioned, non-floated, block-level elements act as if the floated element is not there.
4. To make parent of floats take it height, we must clear the floats, a trick could be adding
overflow: auto.
5. Bootstrap grid system is float based.
8. Positioning
1. Positioning allows you to move an element around the document.
2. We have 4 types of Positioning:
a. Static (default)
b. Relative
c. Absolute
d. Fixed
9. Static
The default value for all elements, represents the normal document flow.
Position related attributes have no effect (top, left, etc…)
Only usage is to override and reset other position values.
Isn’t affected by z-index.
10. Relative
This keyword lays out all elements as though the element were not positioned, and then adjust
the element's position, without changing layout (and thus leaving a gap for the element where it
would have been had it not been positioned (MDN)
- The Element starts where it should have been
- You can move it from it’s original position via (top, left, etc…)
- limits the scope of absolutely positioned child elements
11. Absolute
Do not leave space for the element. Instead, position it at a specified position relative to its
closest positioned ancestor if any, or otherwise relative to the initial containing block.
Absolutely positioned boxes can have margins, and they do not collapse with any other
margins. (MDN)
- The element is out of the browser flow, meaning it won’t be affected by other elements.
- Also it won’t affect other elements flow.
- Will be relative to it closest non static parent, or to the html tag itself if none found.
12. Fixed
Do not leave space for the element.
Instead, position it at a specified position relative to the screen's viewport and don't move it
when scrolled. When printing, position it at that fixed position on every page. This value always
create a new stacking context (MDN).
13. Play Time - Positions
https://plnkr.co/edit/JosJySkjT7V
Ah4xuTp98?p=preview
14. Collapsing Margins
CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can
combine to form a single margin. Margins that combine this way are said to collapse, and the
resulting combined margin is called a collapsed margin. (W3C SPEC)
In short: when two topbottom margins touch each other they collapse
1. The higher margin is taken, and the smaller collapse to 0.
2. Negative and positive margins are added up rather than collapse.
3. Two Negative margins collapse, with the smaller one taken.
15. Play Time - Collapsing Margins
https://plnkr.co/edit/wvaBa6A7R
9snWJVxoIOP?p=preview
16. Stacking context is the three-dimensional conceptualization of HTML elements along an
imaginary z-axis relative to the user who is assumed to be facing the viewport or the webpage.
HTML elements occupy this space in priority order based on element attributes. (MDN)
Elements Order without z-index, are formed by the HTML hierarchy:
1. Last elements in HTML order will be displayed on top.
2. Positioned Elements have higher priority over static elements, which is strong then html
order.
3rd Dimension, stacking context
17. Play Time - Stacking Context no
z-index.
https://plnkr.co/edit/9ygOvS1BiB
qsyatxcCML?p=preview
18. Positioning and assigning a z-index value to an HTML element creates a stacking context, (as
does assigning non-full opacity).
Stacking contexts can be contained in other stacking contexts, and together create a hierarchy
of stacking contexts.
Each stacking context is completely independent from its siblings: only descendant elements are
considered when stacking is processed.
Each stacking context is self-contained: after the element's contents are stacked, the whole
element is considered in the stacking order of the parent stacking context.
Z-index & multi hierarchy stacks
19. Play Time - Stacking Contexts
https://plnkr.co/edit/tzW4NsFWA
Hu0TLjAWEO1?p=preview
MDN menu example
20. Stacking Context - Summary
1. Stacking Context, is the concept of how the browser renders elements in the 3rd dimension
(facing browser window).
2. By default context order is derived from html order (last element on top)
3. Default order gives priority for positioned elements over static elements.
4. Each context can host more contexts, each stacking context is self-contained.
5. New contexts are created by certain conditions
a. HTML root
21. Other Worth Knowing...
1. Css Transform
2. Css Pseudo Elements, check this
3. MDN, anytime you are not sure about
what's going on...