html – 有没有办法指定粘性子标题何时变为unstuck？

概述我正在使用CSS来创建在滚动时保持卡住的子标题,直到下一个子标题出现并轻推它,但是(因为我使用的是旋转文本)我想以某种方式控制(通过填充,也许？)当子标题变为“unstuck”时,副标题不重叠.这就是我所拥有的： .itemblock { background-color: red; color: white; padding: 10px; margin-bottom: 10px 我正在使用CSS来创建在滚动时保持卡住的子标题,直到下一个子标题出现并轻推它,但是(因为我使用的是旋转文本)我想以某种方式控制(通过填充,也许？)当子标题变为“unstuck”时,副标题不重叠.这就是我所拥有的：

.itemblock {  background-color:  red;  color: white;  padding: 10px;  margin-bottom: 10px;  margin-left: 10px;}.subcategory {  border-left: solID 20px blue;}.subhead {  position: -webkit-sticky;  position: -moz-sticky;  position: -o-sticky;  position: -ms-sticky;  position: sticky;  color: white;  display: block;  height: 0px;  scroll: hIDden;  top: 10px;  left: -40px;  margin-left: -18px;  transform-origin: top left;  transform: rotate(-90deg) translate(-20px);}

<div >  <div >A</div>  <div >Item A1</div>  <div >Item A2</div>  <div >Item A3</div>  <div >Item A4</div>  <div >Item A5</div>  <div >Item A6</div>  <div >Item A7</div>  <div >Item A8</div>  <div >Item A9</div></div><div >  <div >B</div>  <div >Item B1</div>  <div >Item B2</div>  <div >Item B3</div>  <div >Item B4</div>  <div >Item B5</div>  <div >Item B6</div>  <div >Item B7</div>  <div >Item B8</div>  <div >Item B9</div></div><div >  <div >C</div>  <div >Item C1</div>  <div >Item C2</div>  <div >Item C3</div>  <div >Item C4</div>  <div >Item C5</div>  <div >Item C6</div>  <div >Item C7</div>  <div >Item C8</div>  <div >Item C9</div></div>

如果向上滚动,您将看到“A”子标记保持卡住,直到“B”子标题出现,但两者重叠一会儿.我希望能够让“A”标题变得松散,因此它似乎保持在它自己的蓝色区域内.

当然,问题更复杂,标题更长：

.itemblock {  background-color:  red;  color: white;  padding: 10px;  margin-bottom: 10px;  margin-left: 10px;}.subcategory {  border-left: solID 20px blue;}.subhead {  position: -webkit-sticky;  position: -moz-sticky;  position: -o-sticky;  position: -ms-sticky;  position: sticky;  color: white;  display: block;  height: 0px;  scroll: hIDden;  top: 10px;  left: -40px;  margin-left: -18px;  transform-origin: top left;  transform: rotate(-90deg) translate(-80px);}

<div >  <div >Subhead A</div>  <div >Item A1</div>  <div >Item A2</div>  <div >Item A3</div>  <div >Item A4</div>  <div >Item A5</div>  <div >Item A6</div>  <div >Item A7</div>  <div >Item A8</div>  <div >Item A9</div></div><div >  <div >Subhead B</div>  <div >Item B1</div>  <div >Item B2</div>  <div >Item B3</div>  <div >Item B4</div>  <div >Item B5</div>  <div >Item B6</div>  <div >Item B7</div>  <div >Item B8</div>  <div >Item B9</div></div><div >  <div >Subhead C</div>  <div >Item C1</div>  <div >Item C2</div>  <div >Item C3</div>  <div >Item C4</div>  <div >Item C5</div>  <div >Item C6</div>  <div >Item C7</div>  <div >Item C8</div>  <div >Item C9</div></div>

我认识到这可能只是推动CSS太过分了.如果可以的话,我真的想避免任何JavaScript,但如果我必须走这条路,我会的.

有任何想法吗？

解决方法 您可以使用z-index来解决此问题：

>添加位置：相对于.subcategory,以确保我们可以应用z-index
>在.subcategory中添加了z-index：1
>在.subhead中添加了z-index：2

.itemblock {  background-color:  red;  color: white;  padding: 10px;  margin-bottom: 10px;  margin-left: 10px;}.subcategory {  border-left: solID 20px blue;  position: relative;  z-index: 1;}.subhead {  position: -webkit-sticky;  position: -moz-sticky;  position: -o-sticky;  position: -ms-sticky;  position: sticky;  color: white;  display: block;  height: 0px;  scroll: hIDden;  top: 10px;  left: -40px;  margin-left: -18px;  transform-origin: top left;  transform: rotate(-90deg) translate(-80px);  z-index: 2;}

<div >  <div >Subhead A</div>  <div >Item A1</div>  <div >Item A2</div>  <div >Item A3</div>  <div >Item A4</div>  <div >Item A5</div>  <div >Item A6</div>  <div >Item A7</div>  <div >Item A8</div>  <div >Item A9</div></div><div >  <div >Subhead B</div>  <div >Item B1</div>  <div >Item B2</div>  <div >Item B3</div>  <div >Item B4</div>  <div >Item B5</div>  <div >Item B6</div>  <div >Item B7</div>  <div >Item B8</div>  <div >Item B9</div></div><div >  <div >Subhead C</div>  <div >Item C1</div>  <div >Item C2</div>  <div >Item C3</div>  <div >Item C4</div>  <div >Item C5</div>  <div >Item C6</div>  <div >Item C7</div>  <div >Item C8</div>  <div >Item C9</div></div>

总结

以上是内存溢出为你收集整理的html – 有没有办法指定粘性子标题何时变为unstuck？全部内容，希望文章能够帮你解决html – 有没有办法指定粘性子标题何时变为unstuck？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。