Html 粘性定位的子元素忽略父母的填充

发布于11月07日

如何防止粘性元素移到页眉后面？

当前的代码片段在父对象上使用填充顶部，我也try 在附加子对象上使用边距-顶部，或者在50px的透明边框上使用边框，但似乎不起作用.

我知道在这种情况下我可以很容易地在粘性上使用top: 50px;，但我想将这一部分集成到一个Reaction组件中，使用特定的大小会使组合不同的组件变得更加困难，因为它们都必须共享最大的大小.

我怎样才能使表头/填充物"结实"，使粘性的东西无法通过？

body{
  background: rgb(200,200,200);
  padding:0px;
  margin:0px;
}
header{
  height: 50px;
  font-size: 2em;
  background: aqua;
  opacity: 0.6;
  text-align:center; 
  position: fixed; 
  width: 100%;
}
.content-wrapper{
  padding-top: 50px; /* keeps the header space */
  
  height: 800px; /*for demo*/
}
.sticky{
  position: sticky;
  top:0;
}

<header>header</header>
<div class="content-wrapper">
  <div class="sticky">
  Hello, I am a sticky element
  <div>
<div>

body{ background: rgb(200,200,200); padding:0px; margin:0px; } header{ height: 50px; font-size: 2em; background: aqua; opacity: 0.6; text-align:center; position: fixed; width: 100%; } .content-wrapper{ position: relative; height: 800px; /*for demo*/ transform: translateY(50px); } .sticky{ position: sticky; top:0; } .spacer { height: 200px; }

Html 粘性定位的子元素忽略父母的填充

推荐答案

Html相关问答推荐

HTML横幅未正确对齐页面顶部

HTML图像无法正确放大和缩小规模

R中的动态Webscraping

如何通过扭曲元素来倾斜元素？

在CSS中旋转排除的蒙版图像

使用响应迅速的网格系统，将两列保持在同一行，同时允许更多列用于更大的屏幕

如何保持嵌套进度条的背景色？

Flexbox在元素之间造成了太大的差距

如何在没有包装元素的情况下在React(Next.js)中呈现HTML注释

可以通过悬停时的自定义区域更改文本属性吗？

使用 Thymeleaf 将图像水平居中

如何检测输入字段是否没有必填且没有占位符？

使用 popover api 和 `
` 作为调用元素

如何在 flex 项目中忽略子元素的宽度

css 网格创建空行和列

屏幕缩小时背景图像裁剪高度

将表格标题和过滤器调整到表格的顶部边缘

如何使用 css 将图像变成黑色并使文本出现在悬停时？

如何将第一个 p 标签放在其下方第二个 p 标签的中间

我正在try 向我预先存在的导航栏添加响应式汉堡包导航，但由于某种原因它没有显示