mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
chore(curriculum): rm vids for css positioning lectures (#61575)
This commit is contained in:
hbar1st
+1
-8
@@ -1,19 +1,12 @@
|
||||
---
|
||||
id: 672aa86da9937560d3dfe3d6
|
||||
title: What Are Common Use Cases for Using Floats, and How Do They Work?
|
||||
challengeType: 11
|
||||
videoId: xUr2Oh1KE8I
|
||||
challengeType: 19
|
||||
dashedName: what-are-common-use-cases-for-using-floats
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the video or read the transcript and answer the questions below.
|
||||
|
||||
# --transcript--
|
||||
|
||||
What are common use cases for using floats, and how do they work?
|
||||
|
||||
Floats in CSS are a technique originally designed to allow text to wrap around an element, such as an image. Over time, however, developers found new ways to use floats, applying them to layout design in creative ways. While modern layout methods like Flexbox and Grid are now more commonly used, understanding floats is still important, especially when working with older code or needing to achieve specific layout effects.
|
||||
|
||||
When an element is floated, it's taken out of the normal document flow and pushed to the left or right of its container. The content that follows will wrap around the floated element, filling the remaining space. One classic use is wrapping text around images, where an image is floated to one side, and text wraps around it. This technique is still widely used, especially in articles and blogs where images need to be placed alongside text. Here is the code example:
|
||||
|
||||
+1
-8
@@ -1,19 +1,12 @@
|
||||
---
|
||||
id: 672c3a84fb8d4613776cc99e
|
||||
title: What Is Relative Positioning, and How Does This Differ from the Default Static Positioning?
|
||||
challengeType: 11
|
||||
videoId: 3BO43MUDd8Q
|
||||
challengeType: 19
|
||||
dashedName: what-is-relative-positioning
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the video or read the transcript and answer the questions below.
|
||||
|
||||
# --transcript--
|
||||
|
||||
What is relative positioning, and how does this differ from the default static positioning?
|
||||
|
||||
In CSS, positioning allows us to control how elements are laid out on a page. Two common types of positioning are static positioning and relative positioning. By default, elements are statically positioned. This means they follow the normal flow of the document, one after another, from top to bottom, left to right.
|
||||
|
||||
Static positioning is the default for all elements and doesn't need any special declaration in CSS. You won’t notice anything different when using static positioning because it just keeps elements where they naturally occur in the document. Here is an example of a paragraph using default static positioning:
|
||||
|
||||
+1
-8
@@ -1,19 +1,12 @@
|
||||
---
|
||||
id: 672c3a8fac7c5613b4bb75de
|
||||
title: What Is Absolute Positioning, and How Does It Work?
|
||||
challengeType: 11
|
||||
videoId: KaTb9CL9lMQ
|
||||
challengeType: 19
|
||||
dashedName: what-is-absolute-positioning
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the video or read the transcript and answer the questions below.
|
||||
|
||||
# --transcript--
|
||||
|
||||
What is absolute positioning, and how does it work?
|
||||
|
||||
Absolute positioning allows you to take an element out of the normal document flow, making it behave independently from other elements. When an element is positioned absolutely, it is placed in its own layer, completely separate from everything else in the layout. This makes it useful for creating floating UI features such as modals, tooltips, or dropdown menus, which can overlap other elements on the page.
|
||||
|
||||
By default, absolutely positioned elements are placed relative to the closest positioned ancestor. If no positioned ancestor is found, the element will be positioned relative to the initial containing block, which is usually the browser's viewport. You can move the absolutely positioned element around using the `top`, `bottom`, `left`, and `right` properties to specify how far away it should be from the edges of its containing element.
|
||||
|
||||
+1
-8
@@ -1,19 +1,12 @@
|
||||
---
|
||||
id: 672c3a9d32c56113fcaedf24
|
||||
title: What Is Fixed and Sticky Positioning, and How Does It Differ from Absolute Positioning?
|
||||
challengeType: 11
|
||||
videoId: H7sJoYv_zmA
|
||||
challengeType: 19
|
||||
dashedName: what-is-fixed-and-sticky-positioning
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the video or read the transcript and answer the questions below.
|
||||
|
||||
# --transcript--
|
||||
|
||||
What is fixed and sticky positioning, and how does it differ from absolute positioning?
|
||||
|
||||
Fixed and sticky positioning are two important CSS positioning strategies, each offering distinct behaviors compared to absolute positioning. When an element is positioned with `position: fixed`, it is removed from the normal document flow and placed relative to the viewport, meaning it stays in the same position even when the user scrolls. This is often used for elements like headers or navigation bars that need to remain visible at all times. For example, if you want a heading to stay fixed at the top of the page, you can use the following code:
|
||||
|
||||
```css
|
||||
|
||||
+1
-8
@@ -1,19 +1,12 @@
|
||||
---
|
||||
id: 672c3aa9bc3a481425cb52b3
|
||||
title: What Is the Z-Index Property, and How Does It Work to Control the Stacking of Positioned Elements?
|
||||
challengeType: 11
|
||||
videoId: IkEM5npJM5E
|
||||
challengeType: 19
|
||||
dashedName: what-is-the-z-index-property
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the video or read the transcript and answer the questions below.
|
||||
|
||||
# --transcript--
|
||||
|
||||
What is the `z-index` property, and how does it work to control the stacking of positioned elements?
|
||||
|
||||
The `z-index` property in CSS is used to control the vertical stacking order of positioned elements that overlap on the page. When multiple elements are stacked on top of each other, the `z-index` value determines which element appears on top. The higher the `z-index` value, the closer the element is to the viewer, while lower values place the element farther back in the stack.
|
||||
|
||||
However, the `z-index` only works on elements that are positioned, which means the element must have a position value other than `static`, such as `relative`, `absolute`, or `fixed`. The default `z-index` value is `auto`, which places the element in the default stacking order. Let's take a look at an example with three boxes:
|
||||
|
||||
Reference in New Issue
Block a user