Html CSS div（相对位置）忽略另一个div（位置：绝对）

试图构建一个具有固定的、非滚动的标题区域（称为“top_box”）和可滚动的内容区域（称为“middle_box”）的站点

顶部框为位置：绝对。 中间的框是位置：相对

中间的\u框“忽略”顶部的\u框，并显示在顶部的\u框上，而不是显示在其下方

#机顶盒{
位置：固定！重要；
位置：绝对位置；
最高：2%；
身高：20%；
}
#中间箱{
位置：相对位置；
身高：70%；
溢出：自动；
}

...
...

为什么必须给第二个框指定

位置：相对位置


#机顶盒{
位置：绝对位置；
最高：2%；
身高：20%；
背景：红色；
}
#中间箱{
位置：绝对位置；
最高：20%；
身高：70%；
背景：蓝色；
}

顶部
底部
为什么必须给第二个框指定
位置：相对位置


#机顶盒{
位置：绝对位置；
最高：2%；
身高：20%；
背景：红色；
}
#中间箱{
位置：绝对位置；
最高：20%；
身高：70%；
背景：蓝色；
}

顶部
底部
已修复！重要的将优先于
绝对值

它下面也不会有，因为它将从父级开始，而不是从它下面开始


#机顶盒{
位置：绝对位置；
最高：2%；
身高：20%；
背景颜色：黄色；
}
#中间箱{
位置：相对位置；
身高：70%；
溢出：自动；
背景颜色：蓝色；
}

同侧眼底1
同侧视野2
已修复！重要的将优先于
绝对值

它下面也不会有，因为它将从父级开始，而不是从它下面开始


#机顶盒{
位置：绝对位置；
最高：2%；
身高：20%；
背景颜色：黄色；
}
#中间箱{
位置：相对位置；
身高：70%；
溢出：自动；
背景颜色：蓝色；
}

同侧眼底1
同侧视野2
问题在于
位置：固定
或
位置：绝对
将div从流中取出。正因为如此，您的亲戚div不会注意到上面已经有一个了。因此，它将被放置在顶部

要实现您想要的，您必须将CSS更改为以下内容

我已经设置了内容，在您的例子中，div
#middle_box
设置为
高度：1000px
，这样您可以看到内容区域是可滚动的，而您的另一个div
#top_box
保持在顶部


正文{
保证金：0；
}
#顶箱{
位置：固定；
排名：0；
左：0；
宽度：100%；
身高：20%；
背景：#eee；
z指数：100；
}
#中间箱{
位置：绝对位置；
最高：20%；
左：0；
宽度：100%；
高度：1000px；
背景：rgba（0,0,0,0.3）；
}

顶箱
中间箱
问题在于
位置：固定
或
位置：绝对
将div从流中取出。正因为如此，您的亲戚div不会注意到上面已经有一个了。因此，它将被放置在顶部

要实现您想要的，您必须将CSS更改为以下内容

我已经设置了内容，在您的例子中，div
#middle_box
设置为
高度：1000px
，这样您可以看到内容区域是可滚动的，而您的另一个div
#top_box
保持在顶部


正文{
保证金：0；
}
#顶箱{
位置：固定；
排名：0；
左：0；
宽度：100%；
身高：20%；
背景：#eee；
z指数：100；
}
#中间箱{
位置：绝对位置；
最高：20%；
左：0；
宽度：100%；
高度：1000px；
背景：rgba（0,0,0,0.3）；
}

顶箱
中间箱
我不知道你对可滚动内容区的真正含义。我想你的意思是，当内容溢出时，它是一个滚动部分。如果可滚动的内容意味着您需要溢出滚动。您可以在不使用位置的情况下进行此操作。我将中间框%更改为px，以便在内容溢出时滚动。任何问题请在评论中问我，谢谢


#机顶盒{
文本对齐：居中；
身高：20%；
边框：1px纯蓝色；
}
#中间箱{
溢出：自动；
高度：280px；/*更改高度，否则70%将无法滚动该内容*/
背景：红色；
边框：1px纯黑；
颜色：白色；
文本对齐：对齐；
填充：0 10px；
}
标题{
文本对齐：居中；
}
#页脚框{
边框：1px纯黄色；
文本对齐：居中；
}

非滚动顶部标题区
滚动标题
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。信息技术
它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着desktop的发布而流行
像Aldus PageMaker这样的出版软件包括Lorem Ipsum的版本。Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本，当时一台不知名的打印机
拿起一个铅字厨房，把它翻成一本铅字样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着Letraset的发行而流行起来
包含Lorem Ipsum段落的表格，最近使用的是Aldus PageMaker等桌面发布软件，包括Lorem Ipsum版本。Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是该行业的佼佼者
自16世纪以来，一直是标准的虚拟文本，当时一个不知名的打印机拿起一个打印工具，将其拼凑成一个特定的字体
#top_box{ 
position: fixed;
top: 2%;
height: 20%;
overflow: hidden;
}

#middle_box
{
position: fixed;
top: 22%; /* this should set to 22%-30% depending at where do you want it*/
height: 70%;
overflow: auto;
}