如何在使用position:sticky时删除元素占用的空间？

huangapple
go评论92阅读模式
英文:

How to remove element's space occupied when use position:sticky?

问题

  1. <div class="main">
  2.   <div class="sticky">
  3.     固定菜单
  4.   </div>
  5.   <div class="body">
  6.     正文
  7.   </div>
  8.   <div class="other">
  9.     其他正文
  10.   </div>
  11. </div>
  1. <style>
  2.  html body {
  3.      margin: 0;
  4.      padding:0 ;
  5.      height: 100%;
  6.      width: 100%;
  7.  }
  8.  .main {
  9.      width:100%;
  10.      max-width: 300px;
  11.      height: 480px;
  12.      margin: 0 auto;
  13.      background-color: yellow;
  14.      position: relative;
  15.      margin-top: 50px;
  16.  }
  17.  .body {
  18.      height: 720px;
  19.  }
  20.  .sticky {
  21.      position: sticky;
  22.      z-index:10;
  23.      top: 0;
  24.      background-color: blue;
  25.      display: inline-block;
  26.      transform: translate(-100%,0);
  27.  }
  28. </style>

如何在使用position:sticky时删除元素占用的空间？

我想要移除红色框所占的空间，其中一个解决方案是将.sticky置于position: absolute中，但我不能更改HTML结构，有没有办法使它生效？谢谢！

  2. <details>
  3. <summary>英文:</summary>
  5. The html struct

<div class="main">
<div class="sticky">
sticky menu
</div>
<div class="body">
body
</div>
<div class="other">
other body
</div>
</div>

  2. The css style

<style>
html body {
margin: 0;
padding:0 ;
height: 100%;
width: 100%;
}
.main {
width:100%;
max-width: 300px;
height: 480px;
margin: 0 auto;
background-color: yellow;
position: relative;
margin-top: 50px;
}
.body {
height: 720px;
}
.sticky {
position: sticky;
z-index:10;
top: 0;
background-color: blue;
display: inline-block;
transform: translate(-100%,0);
}
</style>

  1. [![sticky][1]][1]
  3. I want to remove the space occupied by the red box, One of the solutions is make `.sticky` inside `position: absolute`, but I can&#39;t change html struct, any solution to make it work? Thanks
  6.   [1]: https://i.stack.imgur.com/rAVLI.png
  8. </details>
  11. # 答案1
  12. **得分**: 1
  14. 一种想法是使用浮动（float），然后使用 shape-outside 使元素占用 0 空间。
  16. ```css
  17. body {
  18.   margin: 0;
  19. }
  21. .main {
  22.   max-width: 300px;
  23.   height: 480px;
  24.   margin: 0 auto;
  25.   background-color: yellow;
  26.   position: relative;
  27.   margin-top: 50px;
  28. }
  30. .body {
  31.   height: 720px;
  32. }
  34. .sticky {
  35.   position: sticky;
  36.   z-index: 10;
  37.   top: 0;
  38.   background-color: blue;
  39.   float: left; /* 这里 */
  40.   shape-outside: inset(50%); /* 还有这里 */
  41.   transform: translate(-100%, 0);
  42. }
  1. <div class="main">
  2.   <div class="sticky">
  3.     sticky menu
  4.   </div>
  5.   <div class="body">
  6.     body
  7.   </div>
  8.   <div class="other">
  9.     other body
  10.   </div>
  11. </div>
英文:

One idea is to use float and then use shape-outside to make the element takes 0 space.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. body {
  2.   margin: 0;
  3. }
  5. .main {
  6.   max-width: 300px;
  7.   height: 480px;
  8.   margin: 0 auto;
  9.   background-color: yellow;
  10.   position: relative;
  11.   margin-top: 50px;
  12. }
  14. .body {
  15.   height: 720px;
  16. }
  18. .sticky {
  19.   position: sticky;
  20.   z-index: 10;
  21.   top: 0;
  22.   background-color: blue;
  23.   float: left; /* here */
  24.   shape-outside: inset(50%); /* and here */
  25.   transform: translate(-100%, 0);
  26. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;main&quot;&gt;
  2.   &lt;div class=&quot;sticky&quot;&gt;
  3.     sticky menu
  4.   &lt;/div&gt;
  5.   &lt;div class=&quot;body&quot;&gt;
  6.     body
  7.   &lt;/div&gt;
  8.   &lt;div class=&quot;other&quot;&gt;
  9.     other body
  10.   &lt;/div&gt;
  11. &lt;/div&gt;

<!-- end snippet -->

答案2

得分: -1

Instead of position sticky, use position fixed and add padding to the body container.

英文:

Instead of position sticky, use position fixed and add padding to the body container

huangapple
  • 本文由 发表于 2023年6月29日 17:04:34
  • 转载请务必保留本文链接：https://go.coder-hub.com/76579600.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定