多个 div 的粘性位置相互重叠

发布于 2025-01-18 00:23:02 字数 981 浏览 2 评论 0原文

当我拥有粘性位置的多个DIV时，第一个DIV在末尾将第二个DIV重叠，而不会锁定位置而不会重叠。当它结束时，我如何使其锁定在相应的div时

，是该html的copepen

：

<main class="main-container">
  <header class="main-header">HEADER</header>
  <div class="main-header">MAIN CONTENT</div>
  <footer class="main-footer">FOOTER</footer>
</main>

css

body{color:#fff; font-family:arial; font-weight:bold; font-size:40px; }
.main-container{ max-width:600px; margin:0 auto; border:solid 10px green; padding:10px; margin-top:40px;}
.main-container *{padding:10px;background:#aaa; border:dashed 5px #000;}
.main-container * + *{margin-top:20px;}
.main-header{
  height:50px; background:#aaa; border-color:red;
}
.main-content{
  min-height:1000px;
}

.main-header{position:-webkit-sticky; position:sticky; top:0;}

codepen

中的原始问题

网站

原文

When i have multiple div's with sticky position the first div is overlapping the second div while at the end and not staying locked at the position without overlapping.
How do i make it lock at a position when it ends the corresponding div

Here is a copepen for that

HTML :

<main class="main-container">
  <header class="main-header">HEADER</header>
  <div class="main-header">MAIN CONTENT</div>
  <footer class="main-footer">FOOTER</footer>
</main>

CSS

body{color:#fff; font-family:arial; font-weight:bold; font-size:40px; }
.main-container{ max-width:600px; margin:0 auto; border:solid 10px green; padding:10px; margin-top:40px;}
.main-container *{padding:10px;background:#aaa; border:dashed 5px #000;}
.main-container * + *{margin-top:20px;}
.main-header{
  height:50px; background:#aaa; border-color:red;
}
.main-content{
  min-height:1000px;
}

.main-header{position:-webkit-sticky; position:sticky; top:0;}

Codepen

Original problem in website

https://ibb.co/BCq4Pnd

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

守护在此方 2025-01-25 00:23:03

首先计算您的情况下第一个元素的高度，即（ 80px 包括边框和填充）。

将 80px top 设置为第二个元素。

第三个元素的顶部为 160px，依此类推。

所有元素都会有 position:sticky

试试这个，

body{color:#fff; font-family:arial; font-weight:bold; font-size:40px; height:1000px}
.main-container{ max-width:600px; margin:0 auto; border:solid 10px green; padding:10px; margin-top:40px;}
.main-container *{padding:10px;background:#aaa; border:dashed 5px #000;}
.main-container * + *{margin-top:20px;}
.main-header{
  height:50px; background:#aaa; border-color:red;
}
.main-content{
  min-height:1000px;
}

.main-header{position:sticky; top:0px;}
div.main-header{top:80px }
.main-footer{position:sticky; top:160px }

<main class="main-container">
  <header class="main-header">HEADER</header>
  <div class="main-header">MAIN CONTENT</div>
  <footer class="main-footer">FOOTER</footer>
</main>

First calculate the height of first element i.e( 80px including border and paddings ) in your case.

Give 80px top to the second element.

Third element will have a top of 160px and so on.

All elements will have position:sticky

Try this,

body{color:#fff; font-family:arial; font-weight:bold; font-size:40px; height:1000px}
.main-container{ max-width:600px; margin:0 auto; border:solid 10px green; padding:10px; margin-top:40px;}
.main-container *{padding:10px;background:#aaa; border:dashed 5px #000;}
.main-container * + *{margin-top:20px;}
.main-header{
  height:50px; background:#aaa; border-color:red;
}
.main-content{
  min-height:1000px;
}

.main-header{position:sticky; top:0px;}
div.main-header{top:80px }
.main-footer{position:sticky; top:160px }

<main class="main-container">
  <header class="main-header">HEADER</header>
  <div class="main-header">MAIN CONTENT</div>
  <footer class="main-footer">FOOTER</footer>
</main>

回复收藏 0 原文