html-css中多个粘性元素的问题

【问题标题】：Problem with multiple sticky element in html-csshtml-css中多个粘性元素的问题
【发布时间】：2020-03-04 11:34:17
【问题描述】：

我有像 <div class="info"><span>March 1 2020</span></div> 这样的“信息”类的 div 它的 css 是 - 

.info{
       position:sticky;
       top:0;
   }

但是所有这些 div 在滚动时都是重叠的。
如何解决重叠问题？
我的意思是如果新的粘性元素撞击了前一个粘性元素，那么之前的粘性元素应该像https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning中给出的那样消失@

        body {
            font-size: 1em;
            user-select: none;
            background-color: #e0e0e0;
            font-family: sans-serif;
            font-size: 100%;
        }
        /* multiple sticky element css --STARTS*/
        .info{
        position:sticky;
        top:0;
        }
        /* multiple sticky element css _______ENDS*/
        
        main {
            width: 50%;
            min-width: 550px;
            margin: 0 auto;
            background-color: #e0e0e0;
            height: 300px;
            overflow-y: scroll;
        }

        

        #wrap {
            padding: 5px;
            display: grid;
            grid-gap: 2px;
            position: relative;
            z-index: 1;
        }

        #wrap .right_wrap {
            width: 80%;
            padding-left: 20%;
            display: flex;
            justify-content: flex-end;
        }

        #wrap .left_wrap {
            display: flex;
            justify-content: flex-start;
            width: 80%;
        }

        .right_wrap .sms_section {
            background-color: #dbf4c6;
            border-radius: 7.5px;
            padding: 6px 7px 8px 9px;
        }

        .left_wrap .sms_section {
            background-color: #f4f4f4;
            border-radius: 7.5px;
            padding: 6px 7px 8px 9px;
        }

        .sms_section {
            display: grid;
            grid-template-columns: 1fr 48px;
        }

        .left_time,
        .right_time {
            grid-column: 2/3;
            grid-row: 2;
            margin-top: -6px;
        }

        #inpt {
            position: sticky;
            bottom: 0;
            text-align: left;
            background-color: #d0d0d0;
            padding: 5px 0 5px 5px;
            box-shadow: 0 0 20px -11px;
        }

        input[type='text'] {
            font-size: 16px;
            width: 80%;
            border-radius: 2px;
            border: none;
            padding: 5px;

        }
<body>
    <main>
        <section id="wrap">
            <div class="info"><span>March 1 2020</span></div>

            <div class="left_wrap">
                <section class="sms_section">
                    <div class="left_sms">left message left message left message left message left message message messagemessage message messagemessage message messagemessage message messagemessage message messagemessage message messagemessage message messagemessage message messagejkjkjk kjkjkjjkk kjijiji kjkjkjkjkjkjkjkjkjkjkjkjjjkj kjkjkjkjkkkjkjkj </div>
                    <span class="left_time">
                        <code>4.06AM</code>
                    </span>
                </section>
                <!--.sms_section-->
            </div>
            <div class="info"><span>March 2 2020</span></div>
            <div class="left_wrap">
                <section class="sms_section">
                    <div class="left_sms">left message left message left message left message left message</div> <span class="left_time"><code>4.06AM</code></span>
                </section>
            </div>

            <div class="right_wrap">
                <section class="sms_section">
                    <div class="right_sms">left message left message left message left message left message left message left message left message left message left message</div> <span class="right_time"><code>4.06AM</code></span>
                </section>
            </div>

            <div class="left_wrap">
                <section class="sms_section">
                    <div class="left_sms">left message left message left message left message left message</div> <span class="left_time"><code>4.06AM</code></span>
                </section>
            </div>
            <div class="info"><span>Yesterday</span></div>

            <div class="right_wrap">
                <section class="sms_section">
                    <div class="right_sms">left message left message left message left message left message</div> <span class="right_time"><code>4.06AM</code></span>
                </section>
            </div>
            <div class="right_wrap">
                <section class="sms_section">
                    <div class="right_sms">left message left message left message left message left message</div> <span class="right_time"><code>4.06AM</code></span>
                </section>
            </div>
            <div class="right_wrap">
                <section class="sms_section">
                    <div class="right_sms">left message left message left message left message left message</div> <span class="right_time"><code>4.06AM</code></span>
                </section>
            </div>
            <div class="right_wrap">
                <section class="sms_section">
                    <div class="right_sms">left message left message left message left message left message</div> <span class="right_time"><code>4.06AM</code></span>
                </section>
            </div>

            <div class="right_wrap">
                <section class="sms_section">
                    <div class="right_sms">left message left message left message left message left message</div> <span class="right_time"><code>4.06AM</code></span>
                </section>
            </div>

            <div id="inpt">
                <input type="text" placeholder="type here">

            </div>

        </section>
    </main>


</body>

在这里帮助

【问题讨论】：

  • 您到底想要发生什么？向下滚动时是否替换了粘性日期？
  • 看看这个codepen.io/trymedo/pen/YXWvOo
  • 这能回答你的问题吗？ pure CSS multiple stacked position sticky?
  • @metaDesign 是的，以前的粘性元素必须替换为新的粘性元素，而不是重叠。
  • @carljohnson 背景颜色是实现它的一种 hacky 方式，要真正替换它，您需要一点 Javascript，因为 CSS 无法检测滚动事件

标签： html css


【解决方案1】：

您需要为每一天创建一个容器，设置为位置：相对于要锚定的粘性元素。

.sticky-contain{
  position: relative;
}

body {
            font-size: 1em;
            user-select: none;
            background-color: #e0e0e0;
            font-family: sans-serif;
            font-size: 100%;
        }
        /* multiple sticky element css --STARTS*/
        .info{
        position:sticky;
        top:0;
        }
        /* multiple sticky element css _______ENDS*/
        
        main {
            width: 50%;
            min-width: 550px;
            margin: 0 auto;
            background-color: #e0e0e0;
            height: 300px;
            overflow-y: scroll;
        }

        

        #wrap {
            padding: 5px;
            display: grid;
            grid-gap: 2px;
            position: relative;
            z-index: 1;
        }

        #wrap .right_wrap {
            width: 80%;
            padding-left: 20%;
            display: flex;
            justify-content: flex-end;
        }

        #wrap .left_wrap {
            display: flex;
            justify-content: flex-start;
            width: 80%;
        }

        .right_wrap .sms_section {
            background-color: #dbf4c6;
            border-radius: 7.5px;
            padding: 6px 7px 8px 9px;
        }

        .left_wrap .sms_section {
            background-color: #f4f4f4;
            border-radius: 7.5px;
            padding: 6px 7px 8px 9px;
        }

        .sms_section {
            display: grid;
            grid-template-columns: 1fr 48px;
        }

        .left_time,
        .right_time {
            grid-column: 2/3;
            grid-row: 2;
            margin-top: -6px;
        }

        #inpt {
            position: sticky;
            bottom: 0;
            text-align: left;
            background-color: #d0d0d0;
            padding: 5px 0 5px 5px;
            box-shadow: 0 0 20px -11px;
        }

        input[type='text'] {
            font-size: 16px;
            width: 80%;
            border-radius: 2px;
            border: none;
            padding: 5px;

        }
<body>
    <main>
        <section id="wrap">
          <div class="sticky-contain">
            <div class="info"><span>March 1 2020</span></div>

            <div class="left_wrap">
                <section class="sms_section">
                    <div class="left_sms">left message left message left message left message left message message messagemessage message messagemessage message messagemessage message messagemessage message messagemessage message messagemessage message messagemessage message messagejkjkjk kjkjkjjkk kjijiji kjkjkjkjkjkjkjkjkjkjkjkjjjkj kjkjkjkjkkkjkjkj </div>
                    <span class="left_time">
                        <code>4.06AM</code>
                    </span>
                </section>
                <!--.sms_section-->
            </div>
          </div>
          <div class="sticky-contain">

            <div class="info"><span>March 2 2020</span></div>
            <div class="left_wrap">
                <section class="sms_section">
                    <div class="left_sms">left message left message left message left message left message</div> <span class="left_time"><code>4.06AM</code></span>
                </section>
            </div>

            <div class="right_wrap">
                <section class="sms_section">
                    <div class="right_sms">left message left message left message left message left message left message left message left message left message left message</div> <span class="right_time"><code>4.06AM</code></span>
                </section>
            </div>

            <div class="left_wrap">
                <section class="sms_section">
                    <div class="left_sms">left message left message left message left message left message</div> <span class="left_time"><code>4.06AM</code></span>
                </section>
            </div>
            
          </div>
          <div class="sticky-contain">

            <div class="info"><span>Yesterday</span></div>

            <div class="right_wrap">
                <section class="sms_section">
                    <div class="right_sms">left message left message left message left message left message</div> <span class="right_time"><code>4.06AM</code></span>
                </section>
            </div>
            <div class="right_wrap">
                <section class="sms_section">
                    <div class="right_sms">left message left message left message left message left message</div> <span class="right_time"><code>4.06AM</code></span>
                </section>
            </div>
            <div class="right_wrap">
                <section class="sms_section">
                    <div class="right_sms">left message left message left message left message left message</div> <span class="right_time"><code>4.06AM</code></span>
                </section>
            </div>
            <div class="right_wrap">
                <section class="sms_section">
                    <div class="right_sms">left message left message left message left message left message</div> <span class="right_time"><code>4.06AM</code></span>
                </section>
            </div>

            <div class="right_wrap">
                <section class="sms_section">
                    <div class="right_sms">left message left message left message left message left message</div> <span class="right_time"><code>4.06AM</code></span>
                </section>
            </div>
        </div>
            <div id="inpt">
                <input type="text" placeholder="type here">

            </div>

        </section>
    </main>


</body>

【讨论】：

  • 我不知道为什么@Hardi Shah 得到了投票，因为她的回答不正确。您的 ans 需要投票。但是，如果您看到sticky 中给出的示例，您可以看到他们没有添加position:relative 并且仍在工作。为什么会这样？
  • 好的，我明白了。粘性定位的元素被视为相对定位，直到它超过指定的阈值，此时它被视为固定的直到它到达其父元素的边界。
【解决方案2】：

为 Info 类添加了 z-index 和背景颜色。

        body {
            font-size: 1em;
            user-select: none;
            background-color: #e0e0e0;
            font-family: sans-serif;
            font-size: 100%;
        }
        /* multiple sticky element css --STARTS*/
        .info{
        position:sticky;
        top:0;
        background: #e0e0e0;
        z-index: 12;
        }
        /* multiple sticky element css _______ENDS*/
        
        main {
            width: 50%;
            min-width: 550px;
            margin: 0 auto;
            background-color: #e0e0e0;
            height: 300px;
            overflow-y: scroll;
        }

        

        #wrap {
            padding: 5px;
            display: grid;
            grid-gap: 2px;
            position: relative;
            z-index: 1;
        }

        #wrap .right_wrap {
            width: 80%;
            padding-left: 20%;
            display: flex;
            justify-content: flex-end;
        }

        #wrap .left_wrap {
            display: flex;
            justify-content: flex-start;
            width: 80%;
        }

        .right_wrap .sms_section {
            background-color: #dbf4c6;
            border-radius: 7.5px;
            padding: 6px 7px 8px 9px;
        }

        .left_wrap .sms_section {
            background-color: #f4f4f4;
            border-radius: 7.5px;
            padding: 6px 7px 8px 9px;
        }

        .sms_section {
            display: grid;
            grid-template-columns: 1fr 48px;
        }

        .left_time,
        .right_time {
            grid-column: 2/3;
            grid-row: 2;
            margin-top: -6px;
        }

        #inpt {
            position: sticky;
            bottom: 0;
            text-align: left;
            background-color: #d0d0d0;
            padding: 5px 0 5px 5px;
            box-shadow: 0 0 20px -11px;
        }

        input[type='text'] {
            font-size: 16px;
            width: 80%;
            border-radius: 2px;
            border: none;
            padding: 5px;

        }
<body>
    <main>
        <section id="wrap">
            <div class="info"><span>March 1 2020</span></div>

            <div class="left_wrap">
                <section class="sms_section">
                    <div class="left_sms">left message left message left message left message left message message messagemessage message messagemessage message messagemessage message messagemessage message messagemessage message messagemessage message messagemessage message messagejkjkjk kjkjkjjkk kjijiji kjkjkjkjkjkjkjkjkjkjkjkjjjkj kjkjkjkjkkkjkjkj </div>
                    <span class="left_time">
                        <code>4.06AM</code>
                    </span>
                </section>
                <!--.sms_section-->
            </div>
            <div class="info"><span>March 2 2020</span></div>
            <div class="left_wrap">
                <section class="sms_section">
                    <div class="left_sms">left message left message left message left message left message</div> <span class="left_time"><code>4.06AM</code></span>
                </section>
            </div>

            <div class="right_wrap">
                <section class="sms_section">
                    <div class="right_sms">left message left message left message left message left message left message left message left message left message left message</div> <span class="right_time"><code>4.06AM</code></span>
                </section>
            </div>

            <div class="left_wrap">
                <section class="sms_section">
                    <div class="left_sms">left message left message left message left message left message</div> <span class="left_time"><code>4.06AM</code></span>
                </section>
            </div>
            <div class="info"><span>Yesterday</span></div>

            <div class="right_wrap">
                <section class="sms_section">
                    <div class="right_sms">left message left message left message left message left message</div> <span class="right_time"><code>4.06AM</code></span>
                </section>
            </div>
            <div class="right_wrap">
                <section class="sms_section">
                    <div class="right_sms">left message left message left message left message left message</div> <span class="right_time"><code>4.06AM</code></span>
                </section>
            </div>
            <div class="right_wrap">
                <section class="sms_section">
                    <div class="right_sms">left message left message left message left message left message</div> <span class="right_time"><code>4.06AM</code></span>
                </section>
            </div>
            <div class="right_wrap">
                <section class="sms_section">
                    <div class="right_sms">left message left message left message left message left message</div> <span class="right_time"><code>4.06AM</code></span>
                </section>
            </div>

            <div class="right_wrap">
                <section class="sms_section">
                    <div class="right_sms">left message left message left message left message left message</div> <span class="right_time"><code>4.06AM</code></span>
                </section>
            </div>

            <div id="inpt">
                <input type="text" placeholder="type here">

            </div>

        </section>
    </main>


</body>

【讨论】：

  • 它仍然相互重叠。您通过添加 background-color 作弊。例如见sticky。在此链接中，您可以看到粘性元素没有重叠，它们正在替换。
  • Position Sticky 总是与内容重叠，并且 background-color 和 z-index 用于将内容与所有其余内容保持一致。你的目的到这里就完成了，这就是使用位置粘性的正确方法。
  • 您为什么不在解决方案中提及重叠问题。如果您在解决方案中删除 bg-color，那么它会显示您如何添加作弊。如果您的答案是正确的，那么它必须在没有任何 bg-color 的情况下工作，就像 @Facundo Corradini 回答的那样。如果您不在sticky example 中使用 bg-color，那么它仍然可以工作。请参阅code-pen。尝试在您的解决方案中删除 bg-color，然后您可以在没有任何眼睛的情况下看到问题。 希望你现在明白你的回答不正确
  • 再一次你为什么不说解决方案中的重叠问题？
  • @HardiShah Carl 想要解决重叠问题，重叠问题仍在您的解决方案中。所以请再次阅读问题描述，如果您认为您的答案是正确的，只需在 Carl 的代码中添加 bg-color 然后再查看code-pen
猜你喜欢
  • 2012-11-06
  • 1970-01-01
  • 2015-06-14
  • 2017-01-20
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-04-23
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode