Skip to content

Commit 8c30401

Browse files
authored
chore(curriculum): rm vids for css positioning lectures (freeCodeCamp#61575)
1 parent 97e4b65 commit 8c30401

File tree

5 files changed

+5
-40
lines changed

5 files changed

+5
-40
lines changed

curriculum/challenges/english/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672aa86da9937560d3dfe3d6.md

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,12 @@
11
---
22
id: 672aa86da9937560d3dfe3d6
33
title: What Are Common Use Cases for Using Floats, and How Do They Work?
4-
challengeType: 11
5-
videoId: xUr2Oh1KE8I
4+
challengeType: 19
65
dashedName: what-are-common-use-cases-for-using-floats
76
---
87

98
# --description--
109

11-
Watch the video or read the transcript and answer the questions below.
12-
13-
# --transcript--
14-
15-
What are common use cases for using floats, and how do they work?
16-
1710
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.
1811

1912
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:

curriculum/challenges/english/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3a84fb8d4613776cc99e.md

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,12 @@
11
---
22
id: 672c3a84fb8d4613776cc99e
33
title: What Is Relative Positioning, and How Does This Differ from the Default Static Positioning?
4-
challengeType: 11
5-
videoId: 3BO43MUDd8Q
4+
challengeType: 19
65
dashedName: what-is-relative-positioning
76
---
87

98
# --description--
109

11-
Watch the video or read the transcript and answer the questions below.
12-
13-
# --transcript--
14-
15-
What is relative positioning, and how does this differ from the default static positioning?
16-
1710
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.
1811

1912
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:

curriculum/challenges/english/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3a8fac7c5613b4bb75de.md

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,12 @@
11
---
22
id: 672c3a8fac7c5613b4bb75de
33
title: What Is Absolute Positioning, and How Does It Work?
4-
challengeType: 11
5-
videoId: KaTb9CL9lMQ
4+
challengeType: 19
65
dashedName: what-is-absolute-positioning
76
---
87

98
# --description--
109

11-
Watch the video or read the transcript and answer the questions below.
12-
13-
# --transcript--
14-
15-
What is absolute positioning, and how does it work?
16-
1710
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.
1811

1912
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.

curriculum/challenges/english/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3a9d32c56113fcaedf24.md

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,12 @@
11
---
22
id: 672c3a9d32c56113fcaedf24
33
title: What Is Fixed and Sticky Positioning, and How Does It Differ from Absolute Positioning?
4-
challengeType: 11
5-
videoId: H7sJoYv_zmA
4+
challengeType: 19
65
dashedName: what-is-fixed-and-sticky-positioning
76
---
87

98
# --description--
109

11-
Watch the video or read the transcript and answer the questions below.
12-
13-
# --transcript--
14-
15-
What is fixed and sticky positioning, and how does it differ from absolute positioning?
16-
1710
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:
1811

1912
```css

curriculum/challenges/english/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3aa9bc3a481425cb52b3.md

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,12 @@
11
---
22
id: 672c3aa9bc3a481425cb52b3
33
title: What Is the Z-Index Property, and How Does It Work to Control the Stacking of Positioned Elements?
4-
challengeType: 11
5-
videoId: IkEM5npJM5E
4+
challengeType: 19
65
dashedName: what-is-the-z-index-property
76
---
87

98
# --description--
109

11-
Watch the video or read the transcript and answer the questions below.
12-
13-
# --transcript--
14-
15-
What is the `z-index` property, and how does it work to control the stacking of positioned elements?
16-
1710
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.
1811

1912
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:

0 commit comments

Comments
 (0)