Javascript 在浏览器中打开时，如何将内容放在固定标题或导航下？

您好，当我使用html和css制作标题时遇到问题。我有我的标题在固定的位置，但内容是掩盖了我的标题。当我运行它时，我希望我的内容位置在标题下。另外，我将标题宽度设置为100%，但它会向右移动，这样就不会覆盖屏幕上的整个宽度。 [更新]

@介质（最小宽度：468px）{
身体{
背景色：浅绿色；
}
.货柜-1{
显示器：flex；
/*
对齐项目：flex start；-->1号框中的项目
对齐项目：柔性端；-->1号框lebih sempit ke bawah
对齐项目：居中；->方框1 lebih sempit ke tengah（atas bawah）
弹性方向：列；-->flex box menjadi kolom
*/
}
.货柜-2{
显示器：flex；
/*
证明内容：柔性端；
调整内容：灵活启动；
*/
调整内容：间距；/*ada spasi diantara kotak*/
}
}
.货柜-3{
显示器：flex；
柔性包装：包装；
}
.container-1分区、.container-2分区、.container-3分区{
边框：1px#000000实心；
填充：10px；
}
.框-1{
弹性：2；
顺序：2；
}
.方框-2{
弹性：1；
顺序：1；
}
.方框-3{
弹性：1；
顺序：3；
}
.集装箱-2箱{
弹性基准：20%；
}
.3号货柜{
弹性基准：10%；
}
标题{
填充：0.5雷姆；
文本对齐：居中；
字体系列：“Segoe UI”，塔荷马，日内瓦，Verdana，无衬线；
背景颜色：米色；
位置：固定；
宽度：100%；
保证金：0；
}
.整箱{
保证金上限：2.0雷姆；
}

柔性箱
柔性箱
方框1
Lorem ipsum dolor sit amet，是一位杰出的献身者

方框2
Lorem ipsum dolor sit amet，是一位杰出的献身者

方框3
Lorem ipsum dolor sit amet，是一位杰出的献身者

方框4
Lorem ipsum dolor sit amet，是一位杰出的献身者

方框5
Lorem ipsum dolor sit amet，是一位杰出的献身者

方框6
Lorem ipsum dolor sit amet，是一位杰出的献身者

方框7
Lorem ipsum dolor sit amet，是一位杰出的献身者

方框8
Lorem ipsum dolor sit amet，是一位杰出的献身者

方框9
Lorem ipsum dolor sit amet，是一位杰出的献身者

方框10
Lorem ipsum dolor sit amet，是一位杰出的献身者

方框11
Lorem ipsum dolor sit amet，是一位杰出的献身者

方框12
Lorem ipsum dolor sit amet，是一位杰出的献身者

没有看到您的HTML代码，这有点猜测，但我会尝试一下

将

位置：fixed

添加到元素将使其高于其他内容。元素将从文档流中取出。因此，重叠是自然行为

要防止隐藏内容，应在框的父项中添加填充。我猜当您添加以下代码时，它就解决了问题

body {
   padding-top: 3rem; /* should be at least the height of the header*/
}

关于收割台位置的第二个问题可以通过以下代码确定：

/* option 1, add a left position:*/
header {
   ... 
   left: 0;
}

/* option 2, remove the width, use left and right position instead: */
header {
   ... 
   /* width: 100%; remove this line */
   left: 0;
   right: 0;
}

---

没有看到你的HTML代码，这有点猜测，但我会试试看

将

位置：fixed

添加到元素将使其高于其他内容。元素将从文档流中取出。因此，重叠是自然行为

要防止隐藏内容，应在框的父项中添加填充。我猜当您添加以下代码时，它就解决了问题

body {
   padding-top: 3rem; /* should be at least the height of the header*/
}

关于收割台位置的第二个问题可以通过以下代码确定：

/* option 1, add a left position:*/
header {
   ... 
   left: 0;
}

/* option 2, remove the width, use left and right position instead: */
header {
   ... 
   /* width: 100%; remove this line */
   left: 0;
   right: 0;
}

正文{
保证金：0；
}

正文{
保证金：0；
}
标题{
填充：0.5雷姆；
文本对齐：居中；
字体系列：“Segoe UI”，塔荷马，日内瓦，Verdana，无衬线；
背景颜色：米色；
位置：固定；
宽度：100%；
/*不包括整个宽度*/
保证金：0；
}
.整箱{
保证金上限：2.0雷姆；
}

0000

正文{
保证金：0；
}

正文{
保证金：0；
}
标题{
填充：0.5雷姆；
文本对齐：居中；
字体系列：“Segoe UI”，塔荷马，日内瓦，Verdana，无衬线；
背景颜色：米色；
位置：固定；
宽度：100%；
/*不包括整个宽度*/
保证金：0；
}
.整箱{
保证金上限：2.0雷姆；
}

0000

请在您的代码段中添加一些HTML以再现问题。您好，请添加HTML以帮助您我已添加HTML源请在您的代码段中添加一些HTML以再现问题。您好，请添加HTML以帮助您我已添加HTML源我已按照您的说明进行编辑。我给。整个容器填充顶部：5.0 rem，收割台顶部：0；。结果，收割台变得100%宽，上面没有空间。标题不再覆盖内容。非常感谢你是的，我不得不猜。这就是为什么我写了“盒子的父对象”，在你的例子中是

。整个容器
。很高兴听到你成功了。祝你余下的项目好运。我已经按照你的指示做了