Introduction to HTML
- Introduction to Web Development and HTML Basics
- HTML Advanced Level
- Introduction to CSS
CSS Advanced Level
CSS Positioning and Display
Web design concept.
In this unit, we will delve into the concepts of CSS positioning and display properties. These are fundamental aspects of CSS that control the layout and appearance of elements on a webpage.
CSS Positioning
CSS positioning properties allow you to control the position of an element. There are five different positioning schemes:
-
Static: This is the default value. Elements are positioned according to the normal flow of the document.
-
Relative: The element is positioned relative to its normal position. Offsetting an element (top, right, bottom, left) does not affect the position of other elements.
-
Absolute: The element is positioned relative to the nearest positioned ancestor. If no such ancestor exists, it's positioned relative to the initial containing block.
-
Fixed: The element is positioned relative to the browser window. It does not move even if the page is scrolled.
-
Sticky: The element is positioned based on the user's scroll position. It behaves like a relative positioning until a certain scroll position is met, then it behaves like a fixed positioning.
CSS Display
The CSS display property specifies the display behavior of an element. It determines how an element should be displayed on the webpage. There are several display properties:
-
None: The element will not be displayed at all.
-
Inline: Elements are displayed in-line with the text. They do not start on a new line and only take up as much width as necessary.
-
Block: Elements are displayed as block-level elements. They start on a new line and take up the full width available.
-
Inline-block: Elements are displayed inline, like inline elements, but they can have width and height like block elements.
-
Flex: The element behaves like a block element and its children behave like flexible box layout elements.
Understanding and effectively using these positioning and display properties are crucial in controlling the layout of elements on a webpage. By the end of this unit, you should be able to manipulate the position and display of elements to create the desired layout for your webpage.