mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-09-24 23:01:18 +08:00
fix(curriculum): remove unnecessary z-index (#49200)
Co-authored-by: Leslie Yip <leslieyip02@gmail.com> Co-authored-by: Muhammed Mustafa <muhammed@freecodecamp.org> Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>
This commit is contained in:
Leslie Yip
co-authored by
Leslie Yip
Muhammed Mustafa
Shaun Hamilton
Leslie Yip
Muhammed Mustafa
Shaun Hamilton
parent
d65c36e4c3
commit
32a2838714
+27
-23
@@ -179,96 +179,100 @@
|
||||
"Step 42"
|
||||
],
|
||||
[
|
||||
"6201782cc420715562f36271",
|
||||
"64076bbeba941114b0027b6a",
|
||||
"Step 43"
|
||||
],
|
||||
[
|
||||
"620179bc0a6a2358c72b90ad",
|
||||
"6201782cc420715562f36271",
|
||||
"Step 44"
|
||||
],
|
||||
[
|
||||
"62017b6f47454059bf2d3bd1",
|
||||
"620179bc0a6a2358c72b90ad",
|
||||
"Step 45"
|
||||
],
|
||||
[
|
||||
"62017f47c87be96457c49f46",
|
||||
"62017b6f47454059bf2d3bd1",
|
||||
"Step 46"
|
||||
],
|
||||
[
|
||||
"62017fa5bbef406580ceb44f",
|
||||
"62017f47c87be96457c49f46",
|
||||
"Step 47"
|
||||
],
|
||||
[
|
||||
"62018243f046a368fab8ffb6",
|
||||
"62017fa5bbef406580ceb44f",
|
||||
"Step 48"
|
||||
],
|
||||
[
|
||||
"6201830cb0c74b69f1b41635",
|
||||
"62018243f046a368fab8ffb6",
|
||||
"Step 49"
|
||||
],
|
||||
[
|
||||
"620186f4b6b8356d2def576b",
|
||||
"6201830cb0c74b69f1b41635",
|
||||
"Step 50"
|
||||
],
|
||||
[
|
||||
"62018ba1aa263770c953be66",
|
||||
"620186f4b6b8356d2def576b",
|
||||
"Step 51"
|
||||
],
|
||||
[
|
||||
"62018c3e94434a71af1d5eaa",
|
||||
"62018ba1aa263770c953be66",
|
||||
"Step 52"
|
||||
],
|
||||
[
|
||||
"62018ec29b3ae674f40bef31",
|
||||
"62018c3e94434a71af1d5eaa",
|
||||
"Step 53"
|
||||
],
|
||||
[
|
||||
"62019093fe30e278e797d2f6",
|
||||
"62018ec29b3ae674f40bef31",
|
||||
"Step 54"
|
||||
],
|
||||
[
|
||||
"620191707bc65579ddd3ce15",
|
||||
"62019093fe30e278e797d2f6",
|
||||
"Step 55"
|
||||
],
|
||||
[
|
||||
"620192a767533a7ad19d96d7",
|
||||
"620191707bc65579ddd3ce15",
|
||||
"Step 56"
|
||||
],
|
||||
[
|
||||
"6201995d9ab88e80f1989dce",
|
||||
"620192a767533a7ad19d96d7",
|
||||
"Step 57"
|
||||
],
|
||||
[
|
||||
"620199c7a7a32c81d4db3410",
|
||||
"6201995d9ab88e80f1989dce",
|
||||
"Step 58"
|
||||
],
|
||||
[
|
||||
"6201a1a7af32c287bd6b8183",
|
||||
"620199c7a7a32c81d4db3410",
|
||||
"Step 59"
|
||||
],
|
||||
[
|
||||
"6201a1cc668a34888f5b2f52",
|
||||
"6201a1a7af32c287bd6b8183",
|
||||
"Step 60"
|
||||
],
|
||||
[
|
||||
"6201a20d742f5c89736c8cfb",
|
||||
"6201a1cc668a34888f5b2f52",
|
||||
"Step 61"
|
||||
],
|
||||
[
|
||||
"6201a42e39bf3b95b6a33bf3",
|
||||
"6201a20d742f5c89736c8cfb",
|
||||
"Step 62"
|
||||
],
|
||||
[
|
||||
"6201a4adcc6414968b391592",
|
||||
"6201a42e39bf3b95b6a33bf3",
|
||||
"Step 63"
|
||||
],
|
||||
[
|
||||
"6201a5258af7b398b030bfaf",
|
||||
"6201a4adcc6414968b391592",
|
||||
"Step 64"
|
||||
],
|
||||
[
|
||||
"6201a59be346d399c21d10b1",
|
||||
"6201a5258af7b398b030bfaf",
|
||||
"Step 65"
|
||||
],
|
||||
[
|
||||
"6201a59be346d399c21d10b1",
|
||||
"Step 66"
|
||||
]
|
||||
]
|
||||
}
|
||||
+1
-7
@@ -16,16 +16,10 @@ The `calc()` function is a CSS function that allows you to calculate a value bas
|
||||
}
|
||||
```
|
||||
|
||||
Ensure your years do not get hidden by setting a `z-index` of `999`. Then, give it a `margin` of `0 -2px`, and a `padding` set to `0.5rem calc(1.25rem + 2px) 0.5rem 0`.
|
||||
Give `#years` a `margin` of `0 -2px`, and a `padding` set to `0.5rem calc(1.25rem + 2px) 0.5rem 0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#years` selector should have a `z-index` property set to `999`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('z-index') === '999');
|
||||
```
|
||||
|
||||
Your `#years` selector should have a `margin` property set to `0 -2px`.
|
||||
|
||||
```js
|
||||
|
||||
+3
-3
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6201782cc420715562f36271
|
||||
title: Step 43
|
||||
title: Step 44
|
||||
challengeType: 0
|
||||
dashedName: step-43
|
||||
dashedName: step-44
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -219,10 +219,10 @@ section {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: sticky;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
+3
-3
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 620179bc0a6a2358c72b90ad
|
||||
title: Step 44
|
||||
title: Step 45
|
||||
challengeType: 0
|
||||
dashedName: step-44
|
||||
dashedName: step-45
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -205,10 +205,10 @@ section {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: sticky;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
+3
-3
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 62017b6f47454059bf2d3bd1
|
||||
title: Step 45
|
||||
title: Step 46
|
||||
challengeType: 0
|
||||
dashedName: step-45
|
||||
dashedName: step-46
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -207,10 +207,10 @@ section {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: sticky;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
+3
-3
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 62017f47c87be96457c49f46
|
||||
title: Step 46
|
||||
title: Step 47
|
||||
challengeType: 0
|
||||
dashedName: step-46
|
||||
dashedName: step-47
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -275,10 +275,10 @@ section {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: sticky;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
+3
-3
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 62017fa5bbef406580ceb44f
|
||||
title: Step 47
|
||||
title: Step 48
|
||||
challengeType: 0
|
||||
dashedName: step-47
|
||||
dashedName: step-48
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -211,10 +211,10 @@ section {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: sticky;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
+3
-3
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 62018243f046a368fab8ffb6
|
||||
title: Step 48
|
||||
title: Step 49
|
||||
challengeType: 0
|
||||
dashedName: step-48
|
||||
dashedName: step-49
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -211,10 +211,10 @@ section {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: sticky;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
+3
-3
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6201830cb0c74b69f1b41635
|
||||
title: Step 49
|
||||
title: Step 50
|
||||
challengeType: 0
|
||||
dashedName: step-49
|
||||
dashedName: step-50
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -211,10 +211,10 @@ section {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: sticky;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
+3
-3
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 620186f4b6b8356d2def576b
|
||||
title: Step 50
|
||||
title: Step 51
|
||||
challengeType: 0
|
||||
dashedName: step-50
|
||||
dashedName: step-51
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -217,10 +217,10 @@ section {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: sticky;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
+3
-3
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 62018ba1aa263770c953be66
|
||||
title: Step 51
|
||||
title: Step 52
|
||||
challengeType: 0
|
||||
dashedName: step-51
|
||||
dashedName: step-52
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -211,10 +211,10 @@ section {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: sticky;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
+3
-3
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 62018c3e94434a71af1d5eaa
|
||||
title: Step 52
|
||||
title: Step 53
|
||||
challengeType: 0
|
||||
dashedName: step-52
|
||||
dashedName: step-53
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -217,10 +217,10 @@ section {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: sticky;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
+3
-3
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 62018ec29b3ae674f40bef31
|
||||
title: Step 53
|
||||
title: Step 54
|
||||
challengeType: 0
|
||||
dashedName: step-53
|
||||
dashedName: step-54
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -205,10 +205,10 @@ section {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: sticky;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
+3
-3
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 62019093fe30e278e797d2f6
|
||||
title: Step 54
|
||||
title: Step 55
|
||||
challengeType: 0
|
||||
dashedName: step-54
|
||||
dashedName: step-55
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -211,10 +211,10 @@ section {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: sticky;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
+3
-3
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 620191707bc65579ddd3ce15
|
||||
title: Step 55
|
||||
title: Step 56
|
||||
challengeType: 0
|
||||
dashedName: step-55
|
||||
dashedName: step-56
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -211,10 +211,10 @@ section {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: sticky;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
+3
-3
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 620192a767533a7ad19d96d7
|
||||
title: Step 56
|
||||
title: Step 57
|
||||
challengeType: 0
|
||||
dashedName: step-56
|
||||
dashedName: step-57
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -213,10 +213,10 @@ section {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: sticky;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
+3
-3
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6201995d9ab88e80f1989dce
|
||||
title: Step 57
|
||||
title: Step 58
|
||||
challengeType: 0
|
||||
dashedName: step-57
|
||||
dashedName: step-58
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -205,10 +205,10 @@ section {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: sticky;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
+3
-3
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 620199c7a7a32c81d4db3410
|
||||
title: Step 58
|
||||
title: Step 59
|
||||
challengeType: 0
|
||||
dashedName: step-58
|
||||
dashedName: step-59
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -205,10 +205,10 @@ section {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: sticky;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
+3
-3
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6201a1a7af32c287bd6b8183
|
||||
title: Step 59
|
||||
title: Step 60
|
||||
challengeType: 0
|
||||
dashedName: step-59
|
||||
dashedName: step-60
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -207,10 +207,10 @@ section {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: sticky;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
+3
-3
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6201a1cc668a34888f5b2f52
|
||||
title: Step 60
|
||||
title: Step 61
|
||||
challengeType: 0
|
||||
dashedName: step-60
|
||||
dashedName: step-61
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -207,10 +207,10 @@ section {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: sticky;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
+3
-3
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6201a20d742f5c89736c8cfb
|
||||
title: Step 61
|
||||
title: Step 62
|
||||
challengeType: 0
|
||||
dashedName: step-61
|
||||
dashedName: step-62
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -217,10 +217,10 @@ section {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: sticky;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
+3
-3
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6201a42e39bf3b95b6a33bf3
|
||||
title: Step 62
|
||||
title: Step 63
|
||||
challengeType: 0
|
||||
dashedName: step-62
|
||||
dashedName: step-63
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -229,10 +229,10 @@ section {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: sticky;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
+3
-3
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6201a4adcc6414968b391592
|
||||
title: Step 63
|
||||
title: Step 64
|
||||
challengeType: 0
|
||||
dashedName: step-63
|
||||
dashedName: step-64
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -199,10 +199,10 @@ section {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: sticky;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
+3
-3
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6201a5258af7b398b030bfaf
|
||||
title: Step 64
|
||||
title: Step 65
|
||||
challengeType: 0
|
||||
dashedName: step-64
|
||||
dashedName: step-65
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -217,10 +217,10 @@ section {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: sticky;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
+3
-3
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6201a59be346d399c21d10b1
|
||||
title: Step 65
|
||||
title: Step 66
|
||||
challengeType: 0
|
||||
dashedName: step-65
|
||||
dashedName: step-66
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -207,10 +207,10 @@ section {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: sticky;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
+210
@@ -0,0 +1,210 @@
|
||||
---
|
||||
id: 64076bbeba941114b0027b6a
|
||||
title: Step 43
|
||||
challengeType: 0
|
||||
dashedName: step-43
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Adding position `sticky` moved the element into its own stack. To ensure your `#years` element does not get hidden by different stacks, add a `z-index` property set to `999` in the `#years` rule.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#years` selector should have a `z-index` property set to `999`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('z-index'), '999');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Balance Sheet</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
|
||||
<td>$50</td>
|
||||
<td>$50</td>
|
||||
<td class="current">$75</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Liabilities</span></th>
|
||||
<td>$750</td>
|
||||
<td>$600</td>
|
||||
<td class="current">$475</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Net Worth</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Net Worth</span></th>
|
||||
<td>$-171</td>
|
||||
<td>$136</td>
|
||||
<td class="current">$334</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
span[class~="sr-only"] {
|
||||
border: 0;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
clip-path: inset(50%);
|
||||
-webkit-clip-path: inset(50%);
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
color: #0a0a23;
|
||||
}
|
||||
|
||||
h1 {
|
||||
max-width: 37.25rem;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem 1.25rem;
|
||||
}
|
||||
|
||||
h1 .flex {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
h1 .flex span:first-of-type {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
h1 .flex span:last-of-type {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
section {
|
||||
max-width: 40rem;
|
||||
margin: 0 auto;
|
||||
border: 2px solid #d0d0d5;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
#years {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
Reference in New Issue
Block a user