From 9380ced9ad7fdb25631e8c265c9853de8cd0cd48 Mon Sep 17 00:00:00 2001 From: OnkarRuikar <87750369+OnkarRuikar@users.noreply.github.com> Date: Thu, 11 Jul 2024 15:33:27 +0530 Subject: [PATCH 1/5] fix(css): update sticky positioning section --- files/en-us/web/css/position/index.md | 109 ++++++++++---------------- 1 file changed, 43 insertions(+), 66 deletions(-) diff --git a/files/en-us/web/css/position/index.md b/files/en-us/web/css/position/index.md index 51b728cb404bd71..1b18f1483077594 100644 --- a/files/en-us/web/css/position/index.md +++ b/files/en-us/web/css/position/index.md @@ -277,7 +277,9 @@ Fixed positioning is similar to absolute positioning, with the exception that th ### Sticky positioning -Sticky positioning can be thought of as a hybrid of relative and fixed positioning when its nearest scrolling ancestor is the viewport. A stickily positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed until it reaches the boundary of its parent. For example: +A stickily positioned element stays in its normal position as long as it stays within the provided [inset](/en-US/docs/Web/CSS/inset) boundaries, and if the element is moved out of the boundary it stays fixed to the boundary in that direction. So the sticky positioning could be thought of as a hybrid of relative and fixed positioning. For inset sides that have `auto` value, the element doesn't stay fixed in that direction and can go out of the [scrollport](/en-US/docs/Glossary/Scroll_container#scrollport) due to scrolling. + +You must specify at least one of `top`, `right`, `bottom`, or `left` inset for sticky positioning to behave as expected. Otherwise, it will be indistinguishable from relative positioning. ```css #one { @@ -288,85 +290,58 @@ Sticky positioning can be thought of as a hybrid of relative and fixed positioni The above CSS rule would position the element with id _one_ relatively until the viewport was scrolled such that the element would be less than 10 pixels from the top. Beyond that threshold, the element would be fixed to 10 pixels from the top. -A common use for sticky positioning is for the headings in an alphabetized list. The "B" heading will appear just below the items that begin with "A" until they are scrolled offscreen. Rather than sliding offscreen with the rest of the content, the "B" heading will then remain fixed to the top of the viewport until all the "B" items have scrolled offscreen, at which point it will be covered up by the "C" heading, and so on. - -You must specify a threshold with at least one of `top`, `right`, `bottom`, or `left` for sticky positioning to behave as expected. Otherwise, it will be indistinguishable from relative positioning. - #### HTML ```html -
-
-
A
-
Andrew W.K.
-
Apparat
-
Arcade Fire
-
At The Drive-In
-
Aziz Ansari
-
-
-
C
-
Chromeo
-
Common
-
Converge
-
Crystal Castles
-
Cursive
-
-
-
E
-
Explosions In The Sky
-
-
-
T
-
Ted Leo & The Pharmacists
-
T-Pain
-
Thrice
-
TV On The Radio
-
Two Gallants
-
-
+Try to find the right places of the sticky light bulbs(💡) in the following +text: +
+

+ The representation of an idea by a light bulb(💡) + is a commonly used metaphor that symbolizes the moment of inspiration or the + birth of a new idea. The association between a light bulb and an idea can be + traced back to the invention of the incandescent light bulb(💡) by Thomas Edison in the late 19th century. The light bulb is a powerful + symbol because it represents illumination, clarity, and the sudden + brightening of one's thoughts or understanding. When someone has an idea, it + is often described as a light bulb turning on in their mind, signifying a + moment of insight or creativity. The image of a light bulb also suggests the + idea of energy, power, and the potential for growth and development. +

+
``` #### CSS -```css -* { - box-sizing: border-box; +```css hidden +div { + width: 400px; + height: 200px; + overflow: scroll; + font-size: 16px; + font-family: verdana; + border: 1px solid; } -dl > div { - background: #fff; - padding: 24px 0 0 0; +p { + width: 600px; + height: 300px; + user-select: none; + margin: 100px 150px 50px 100px; } +``` -dt { - background: #b8c1c8; - border-bottom: 1px solid #989ea4; - border-top: 1px solid #717d85; - color: #fff; - font: - bold 18px/21px Helvetica, - Arial, - sans-serif; - margin: 0; - padding: 2px 0 0 12px; - position: -webkit-sticky; +```css +.bulb { position: sticky; - top: -1px; -} - -dd { - font: - bold 20px/45px Helvetica, - Arial, - sans-serif; - margin: 0; - padding: 0 0 0 12px; - white-space: nowrap; + inset: 50px 100px 50px 100px; } -dd + dd { - border-top: 1px solid #ccc; +div { + /* mark area defined by the inset boundaries using gray color */ + background: linear-gradient(#9999, #9999) 100px 50px / 184px 84px no-repeat; } ``` @@ -374,6 +349,8 @@ dd + dd { {{EmbedLiveSample('Sticky_positioning', '', '300px')}} +In the above example, both the light bulbs have been made sticky, and inset boundaries have been specified as 50px(top), 100px(right), 50px(bottom), and 100px(right). The inset area has been marked using the same-sized gray-colored background on the div. After you put both the bulbs in their right place, you'll notice that the bulbs act as relatively positioned inside the inset area. But as soon as they get moved out of the inset area they get fixed(stick) to the inset boundary in that direction. + ## Specifications {{Specifications}} From 1167f92d68cc692b2ff6770b4d61b6f73efcb89d Mon Sep 17 00:00:00 2001 From: OnkarRuikar <87750369+OnkarRuikar@users.noreply.github.com> Date: Fri, 12 Jul 2024 12:19:18 +0530 Subject: [PATCH 2/5] apply review comments --- files/en-us/web/css/position/index.md | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/files/en-us/web/css/position/index.md b/files/en-us/web/css/position/index.md index 1b18f1483077594..8568681521fde05 100644 --- a/files/en-us/web/css/position/index.md +++ b/files/en-us/web/css/position/index.md @@ -277,9 +277,7 @@ Fixed positioning is similar to absolute positioning, with the exception that th ### Sticky positioning -A stickily positioned element stays in its normal position as long as it stays within the provided [inset](/en-US/docs/Web/CSS/inset) boundaries, and if the element is moved out of the boundary it stays fixed to the boundary in that direction. So the sticky positioning could be thought of as a hybrid of relative and fixed positioning. For inset sides that have `auto` value, the element doesn't stay fixed in that direction and can go out of the [scrollport](/en-US/docs/Glossary/Scroll_container#scrollport) due to scrolling. - -You must specify at least one of `top`, `right`, `bottom`, or `left` inset for sticky positioning to behave as expected. Otherwise, it will be indistinguishable from relative positioning. +The following CSS rule would position the element with id one relatively until the viewport was scrolled such that the element would be less than 10 pixels from the top. Beyond that threshold, the element would be fixed to 10 pixels from the top. ```css #one { @@ -288,13 +286,13 @@ You must specify at least one of `top`, `right`, `bottom`, or `left` inset for s } ``` -The above CSS rule would position the element with id _one_ relatively until the viewport was scrolled such that the element would be less than 10 pixels from the top. Beyond that threshold, the element would be fixed to 10 pixels from the top. +Now consider the following example, where we have two light bulb emojis in a paragraph. Both the light bulbs have been made sticky, and inset boundaries have been specified as 50px from top, 100px from right, 50px from bottom, and 50px from left. The inset area has been roughly marked using the same-sized gray-colored background on the div. #### HTML ```html -Try to find the right places of the sticky light bulbs(💡) in the following -text: +Using scrollbars, try to find the right places of the sticky light bulbs(💡) in +the following text:

The representation of an idea by a light bulb(💡) @@ -320,6 +318,7 @@ div { width: 400px; height: 200px; overflow: scroll; + scrollbar-width: thin; font-size: 16px; font-family: verdana; border: 1px solid; @@ -327,9 +326,9 @@ div { p { width: 600px; - height: 300px; user-select: none; - margin: 100px 150px 50px 100px; + margin: 0; + border: 110px solid transparent; } ``` @@ -341,7 +340,7 @@ p { div { /* mark area defined by the inset boundaries using gray color */ - background: linear-gradient(#9999, #9999) 100px 50px / 184px 84px no-repeat; + background: linear-gradient(#9999, #9999) 100px 50px / 192px 100px no-repeat; } ``` @@ -349,7 +348,7 @@ div { {{EmbedLiveSample('Sticky_positioning', '', '300px')}} -In the above example, both the light bulbs have been made sticky, and inset boundaries have been specified as 50px(top), 100px(right), 50px(bottom), and 100px(right). The inset area has been marked using the same-sized gray-colored background on the div. After you put both the bulbs in their right place, you'll notice that the bulbs act as relatively positioned inside the inset area. But as soon as they get moved out of the inset area they get fixed(stick) to the inset boundary in that direction. +After you put both the bulbs in their right place, you'll notice that the bulbs act as relatively positioned inside the inset area. But as soon as they get moved out of the inset area they get fixed(stick) to the inset boundary in that direction. ## Specifications From f444a627327cbeae4721a6cc2af9ae4ecc1c1481 Mon Sep 17 00:00:00 2001 From: OnkarRuikar <87750369+OnkarRuikar@users.noreply.github.com> Date: Sat, 13 Jul 2024 11:11:05 +0530 Subject: [PATCH 3/5] bring back the old example --- files/en-us/web/css/position/index.md | 104 ++++++++++++++++++++++++-- 1 file changed, 97 insertions(+), 7 deletions(-) diff --git a/files/en-us/web/css/position/index.md b/files/en-us/web/css/position/index.md index 8568681521fde05..11eaf37f8f80a96 100644 --- a/files/en-us/web/css/position/index.md +++ b/files/en-us/web/css/position/index.md @@ -286,13 +286,103 @@ The following CSS rule would position the element with id one relatively until t } ``` -Now consider the following example, where we have two light bulb emojis in a paragraph. Both the light bulbs have been made sticky, and inset boundaries have been specified as 50px from top, 100px from right, 50px from bottom, and 50px from left. The inset area has been roughly marked using the same-sized gray-colored background on the div. +#### List with sticky headings -#### HTML +A common use for sticky positioning is for the headings in an alphabetized list. The "B" heading will appear just below the items that begin with "A" until they are scrolled offscreen. Rather than sliding offscreen with the rest of the content, the "B" heading will then remain fixed to the top of the viewport until all the "B" items have scrolled offscreen, at which point it will be covered up by the "C" heading, and so on. + +You must specify a threshold with at least one of `top`, `right`, `bottom`, or `left` for sticky positioning to behave as expected. Otherwise, it will be indistinguishable from relative positioning. + +##### HTML ```html -Using scrollbars, try to find the right places of the sticky light bulbs(💡) in -the following text: +

+
+
A
+
Andrew W.K.
+
Apparat
+
Arcade Fire
+
At The Drive-In
+
Aziz Ansari
+
+
+
C
+
Chromeo
+
Common
+
Converge
+
Crystal Castles
+
Cursive
+
+
+
E
+
Explosions In The Sky
+
+
+
T
+
Ted Leo & The Pharmacists
+
T-Pain
+
Thrice
+
TV On The Radio
+
Two Gallants
+
+
+``` + +##### CSS + +```css +* { + box-sizing: border-box; +} + +dl > div { + background: #fff; + padding: 24px 0 0 0; +} + +dt { + background: #b8c1c8; + border-bottom: 1px solid #989ea4; + border-top: 1px solid #717d85; + color: #fff; + font: + bold 18px/21px Helvetica, + Arial, + sans-serif; + margin: 0; + padding: 2px 0 0 12px; + position: -webkit-sticky; + position: sticky; + top: -1px; +} + +dd { + font: + bold 20px/45px Helvetica, + Arial, + sans-serif; + margin: 0; + padding: 0 0 0 12px; + white-space: nowrap; +} + +dd + dd { + border-top: 1px solid #ccc; +} +``` + +##### Result + +{{EmbedLiveSample('List with sticky headings', '', '300px')}} + +#### Sticky position with all the inset boundaries set + +The following example demonstrates how an element behaves when all the inset boundaries are set. Here we have two light bulb emojis in a paragraph. Both the light bulbs have been made sticky, and inset boundaries have been specified as 50px from top, 100px from right, 50px from bottom, and 50px from left. To make the inset area recognizable same-sized gray-colored background on the parent div element has been set. + +##### HTML + +```html +Use scrollbars to put the light bulbs(💡) in the right place in the following +text:

The representation of an idea by a light bulb(💡) @@ -311,7 +401,7 @@ the following text:

``` -#### CSS +##### CSS ```css hidden div { @@ -344,9 +434,9 @@ div { } ``` -#### Result +##### Result -{{EmbedLiveSample('Sticky_positioning', '', '300px')}} +{{EmbedLiveSample('Sticky position with all the inset boundaries set', '', '300px')}} After you put both the bulbs in their right place, you'll notice that the bulbs act as relatively positioned inside the inset area. But as soon as they get moved out of the inset area they get fixed(stick) to the inset boundary in that direction. From c36ddd8673d36ac4dc62bc099db997c7528e2dc5 Mon Sep 17 00:00:00 2001 From: Onkar Ruikar <87750369+OnkarRuikar@users.noreply.github.com> Date: Tue, 16 Jul 2024 13:58:01 +0530 Subject: [PATCH 4/5] Apply suggestions from code review Co-authored-by: Brian Thomas Smith --- files/en-us/web/css/position/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/css/position/index.md b/files/en-us/web/css/position/index.md index 11eaf37f8f80a96..820e2e0bc7d3a90 100644 --- a/files/en-us/web/css/position/index.md +++ b/files/en-us/web/css/position/index.md @@ -376,7 +376,7 @@ dd + dd { #### Sticky position with all the inset boundaries set -The following example demonstrates how an element behaves when all the inset boundaries are set. Here we have two light bulb emojis in a paragraph. Both the light bulbs have been made sticky, and inset boundaries have been specified as 50px from top, 100px from right, 50px from bottom, and 50px from left. To make the inset area recognizable same-sized gray-colored background on the parent div element has been set. +The following example demonstrates an element's behavior when all inset boundaries are set. Here, we have two light bulb emojis in a paragraph. The light bulbs use sticky positioning, and the inset boundaries are specified as 50px from the top, 100px from the right, 50px from the bottom, and 50px from the left. A gray background on the parent div element marks the inset area. ##### HTML @@ -438,7 +438,7 @@ div { {{EmbedLiveSample('Sticky position with all the inset boundaries set', '', '300px')}} -After you put both the bulbs in their right place, you'll notice that the bulbs act as relatively positioned inside the inset area. But as soon as they get moved out of the inset area they get fixed(stick) to the inset boundary in that direction. +When you put both bulbs in their proper place, you'll notice that they are relatively positioned inside the inset area. When you move them out of the inset area, they are fixed (sticky) to the inset boundary in that direction. ## Specifications From 24667daf324a2c236411f54d5307b11693f0bb4d Mon Sep 17 00:00:00 2001 From: Brian Thomas Smith Date: Tue, 16 Jul 2024 10:46:37 +0200 Subject: [PATCH 5/5] Update files/en-us/web/css/position/index.md --- files/en-us/web/css/position/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/position/index.md b/files/en-us/web/css/position/index.md index 820e2e0bc7d3a90..c70e90fa4ef8ef5 100644 --- a/files/en-us/web/css/position/index.md +++ b/files/en-us/web/css/position/index.md @@ -277,7 +277,7 @@ Fixed positioning is similar to absolute positioning, with the exception that th ### Sticky positioning -The following CSS rule would position the element with id one relatively until the viewport was scrolled such that the element would be less than 10 pixels from the top. Beyond that threshold, the element would be fixed to 10 pixels from the top. +The following CSS rule positions the element with id `one` relatively until the viewport is scrolled such that the element is 10 pixels from the top. Beyond that threshold, the element is fixed to 10 pixels from the top. ```css #one {