- From: Wesley Walter Anton Oliver via GitHub <sysbot+gh@w3.org>
- Date: Mon, 22 Jul 2024 18:48:26 +0000
- To: public-css-archive@w3.org
wesleyolis has just created a new issue for https://github.com/w3c/csswg-drafts:
== Feature:Stackable Headers/Footers position: [sticky or absolute], stack header items, z-index:(integer), insert prop[top,left, bottom, right]:auto; display:block; ==
https://www.w3.org/TR/css-position-3/#positioning-scheme
[css-position]
sticky
Identical to [relative](https://www.w3.org/TR/css-position-3/#valdef-position-relative), except that its offsets are automatically adjusted in reference to the nearest ancestor [scroll container’s](https://www.w3.org/TR/css-overflow-3/#scroll-container) [scrollport](https://www.w3.org/TR/css-overflow-3/#scrollport) (as modified by the [inset properties](https://www.w3.org/TR/css-position-3/#inset-properties)) in whichever axes the inset properties are not both [auto](https://www.w3.org/TR/css-position-3/#valdef-top-auto), to try to keep the box in view within its [containing block](https://www.w3.org/TR/css-display-3/#containing-block) as the user scrolls. This [positioning scheme](https://www.w3.org/TR/css-position-3/#positioning-scheme) is called sticky positioning.
**Features:**
**1.** I want to request that when position: sticky is set on an element with auto inset property and z-index,
that sticky behaviour works. Current only when inset property of non-auto specific does it apply.
This allows for items to naturally stack as they do the DOM layout left-> right and down, typically.
If bottom:auto, then typically, then know doing the same thing just at the bottom axis.
You can also do it for left, and right instead of using space, one would be using div.
By allowing the natural stacking of a top, one doesn't need to top:20, next element top:40, top: 60 with CSS preprocess or injection via js, making this effect really simple to achieve. It's super useful actually.
**Preview of output**
```.html
Space
Space
Space
Space
Space
Relative Scroll Container Start -- invisible
Heading1
Heading2
Heading3
Item 9
Item 10
Item 12
Heading4
Item 13
....
Heading5
....
Relative Scroll Container End -- invisible
```
Later, I guess, look at how to implement it on a specific z index.
i.e.
```.html
<div style="position:relative;z-index:1;height:400; width:300 overflow:clip; overflow-sticky:bottom">
```
Some more sticky business, name sticky place holders
Height, Width by element nth element, instead pixel, limit on specific child element count, this combination of props, works my mind,
Name sticky
```.html
<div style="position:relative;z-index:1;height-nth-el:4; width-nth-el:6;overflow:clip; overflow-sticky-name:tpholder">
</div>
<div style="overflow:y">
<div style="position:sticky;sticky-name:tpholder;sticky-name:bttmholder">
</div>
<div>
<div style="position:relative;z-index:1;height-nth-el:4; width-nth-el:6;overflow:clip; overflow-sticky:bttmholder">
</div>
```
**2.** When position: absolute with z-index: non-zero and inset property of auto, then basically
just apply natural HTML dom layout. Maybe come modifier z-index:234234, top
When bottom: auto, just offset from the bottom, by the rendered height.
Then have axis-inverse: y, or axis-inverse: x which runs HTML do layout algorithm with axis swapped or multiplied by -1,
https://www.w3.org/TR/CSS21/visuren.html#propdef-z-index
**Preview of output**
Item 1-5
```.html
Space
Space
Space
Space
Space
Relative Scroll Container Start -- invisible
Heading1 "Can have items here as well, but it is display block, so everything is on a newline"
Heading2
Heading3
Heading4
Heading5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
....
Relative Scroll Container End -- invisible
```
Source Code Sections
1. Source Code
```.html
<style>
div > div {
height: 50px;
background-color:blue
}
.heading {
z-index:1;
position: sticky;
top: auto;
}
</style>
<body>
Space<br/>
Space<br/>
Space<br/>
Space<br/>
Space<br/>
<div style="position:absolute;background-color: red;overflow-y: scroll;height:400px">
<div>
Item 1
</div>
<div class="heading">
Heading 1
</div>
<div>
Item 2
</div>
<div>
Item 3
</div>
<div>
Item 4
</div>
<div>
Item 5
</div>
<div class="heading">
Heading 2
</div>
<div>
Item 6
</div>
<div>
Item 7
</div>
<div>
Item 8
</div>
<div class="heading">
Heading 3
</div>
<div>
Item 9
</div>
<div>
Item 10
</div>
<div>
Item 11
</div>
<div>
Item 12
</div>
<div class="heading">
Heading 4
</div>
<div>
Item 13
</div>
<div>
Item 14
</div>
<div>
Item 15
</div>
<div>
Item 16
</div>
<div class="heading">
Heading 5
</div>
<div>
Item 17
</div>
<div>
Item 18
</div>
<div>
Item 19
</div>
<div>
Item 20
</div>
<div>
Item 21
</div>
</div>
```
2. Source Code
```.html
<style>
div > div {
background-color:blue
}
.heading {
z-index:1;
position: absolute;
top: auto;
}
</style>
<body>
Space<br/>
Space<br/>
Space<br/>
Space<br/>
Space<br/>
<div style="position:relative;height:400px">
<div>
Item 1
</div>
<div class="heading">
Heading 1
</div>
<div>
Item 2
</div>
<div>
Item 3
</div>
<div>
Item 4
</div>
<div>
Item 5
</div>
<div class="heading">
Heading 2
</div>
<div>
Item 6
</div>
<div>
Item 7
</div>
<div>
Item 8
</div>
<div class="heading">
Heading 3
</div>
<div>
Item 9
</div>
<div>
Item 10
</div>
<div>
Item 11
</div>
<div>
Item 12
</div>
<div class="heading">
Heading 4
</div>
<div>
Item 13
</div>
<div>
Item 14
</div>
<div>
Item 15
</div>
<div>
Item 16
</div>
<div class="heading">
Heading 5
</div>
<div>
Item 17
</div>
<div>
Item 18
</div>
<div>
Item 19
</div>
<div>
Item 20
</div>
<div>
Item 21
</div>
</div>
```
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10610 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Monday, 22 July 2024 18:48:28 UTC