Html 如何将内容放置在“绝对”位置下？

我仍然不太熟悉CSS，仍然在研究它，并通过YouTube学习设计

粘性导航条只有在其位置为“绝对”时才会粘在底部。问题来了：我如何把我的内容放在导航栏旁边？最重要的是，我放在下面的内容不会让页面扩大更多的空间/让我滚动

我试着通过调整位置、浮动等来解决这个问题，但我还是被卡住了。原谅我的无知，谢谢你的帮助

/*背景滑块*/
@字体{
字体系列：“Bebas Neue”；
src:url（'BebasNeue.woff'）格式（'woff'），/*非常现代的浏览器*/
}
.幻灯片1、幻灯片2、幻灯片3{
位置：绝对位置；
宽度：100%；
身高：100%；
z指数：1；
背景附件：固定；
}
.滑块.直线{
位置：绝对位置；
宽度：98%；
高度：自动；
底部：40%；
利润率：10px；
z指数：999；
}
.slider.slider标题{
字体系列：Oswald；
身高：0%；
底部：25%；
左：16px；
文本转换：大写；
字体大小：50px；
最小高度：80px；
位置：绝对位置；
字体大小：粗体；
z指数：999；
}
.滑块.滑块说明{
字体系列：Oswald；
底部：20%；
左：16px；
字体大小：15px；
身高：0%；
位置：绝对位置；
z指数：999；
}
.幻灯片-1{
背景图像：url（'../image/01_contentslider_1.jpg'）；
背景重复：无重复；
背景尺寸：封面；
动画：淡入淡出12秒无限；
-webkit动画：淡入淡出12秒无限；
}
.幻灯片-2{
背景图像：url（'../image/01_contentslider_2.jpg'）；
背景重复：无重复；
背景尺寸：封面；
动画：淡入淡出12秒无限；
-webkit动画：淡入淡出-2 12s无限；
}
.幻灯片-3{
背景图像：url（'../image/01_contentslider_3.jpg'）；
背景重复：无重复；
背景尺寸：封面；
动画：淡入淡出12秒无限；
-webkit动画：淡入淡出3 12s无限；
}
@-webkit关键帧淡入淡出-1{
0% {
不透明度：1；
}
25% {
不透明度：0；
}
75% {
不透明度：0；
}
100% {
不透明度：1；
}
}
@关键帧淡入淡出-1{
0% {
不透明度：1；
}
25% {
不透明度：0；
}
75% {
不透明度：0；
}
100% {
不透明度：1；
}
}
@-webkit关键帧淡入淡出-2{
0% {
不透明度：0；
}
25% {
不透明度：1；
}
75% {
不透明度：0；
}
100% {
不透明度：0；
}
}
@关键帧淡入淡出-2{
0% {
不透明度：0；
}
25% {
不透明度：1；
}
75% {
不透明度：0；
}
100% {
不透明度：0；
}
}
@-webkit关键帧淡入淡出-3{
0% {
不透明度：0；
}
25% {
不透明度：0；
}
75% {
不透明度：1；
}
100% {
不透明度：0；
}
}
@关键帧淡入淡出-3{
0% {
不透明度：0；
}
25% {
不透明度：0；
}
75% {
不透明度：1；
}
100% {
不透明度：0；
}
}
.透明度{/*不透明度50*/
位置：相对位置；
宽度：100%；
身高：100%；
背景：url（'../image/00_Transparent.png'）；
排名：0；
底部：0；
z指数：-1000；
溢出：隐藏；
}
/*导航条设置*/
.内容层{
位置：绝对位置；
底部：0；
浮动：左；
填充：0；
}
#导航条{
溢出：隐藏；
背景色：#333；
位置：相对位置；
浮动：左；
宽度：100%；
填充：0；
底部：0；
z指数：999；
}
#导航栏a{
浮动：左；
显示：块；
颜色：#F2F2；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
#导航杆{
列表样式：无；
宽度：800px；
保证金：0自动；
填充：0；
左边距：350px；
}
#巴里导航{
浮动：左；
}
#导航栏a：悬停{
背景色：#ddd；
颜色：黑色；
}
#导航栏李a{
显示：块；
填充：10px 25px；
文字装饰：无；
字体系列：“Arial”；
颜色：#4c；
右边框：1px实心#4c；
}
#导航条a激活{
背景色：#4CAF50；
颜色：白色；
}
.网页内容{
填充：16px；
z指数：999；
底部：0；
溢出：隐藏；
位置：相对位置；
}
.粘的{
位置：固定；
排名：0；
宽度：100%；
}
.粘性+.页面内容{
填充顶部：60px；
}

主页|重新发布Web门户
$（窗口）.on（'load'，function（）{
$（'.preload'）.addClass（'complete'））
})
//所有内容的外观
$（函数（）{
setTimeout（函数（）{
$（'.showcase'）.removeClass（'hidden'）；
}, 4500);
})();






开始你的旅程
要么现在，要么永远。

享受生活而不后悔
通过更深入地了解世界。

用你的手触摸天空
去他妈的。





粘性导航示例
当您到达滚动位置时，导航栏将粘在顶部

window.onscroll=函数（）{
myFunction（）
};
var navbar=document.getElementById（“导航栏”）；
var sticky=navbar.offsetTop；
函数myFunction（）{
如果（window.pageYOffset>=粘性）{
navbar.classList.add（“粘性”）
}否则{
navbar.classList.remove（“粘性”）；
}
}
变量$page=$（'.page'）；
$（'.menu toggle'）。打开（'单击'，函数（）{
$page.toggleClass（'shazam'）；
});
$（'.content'）。在（'click'，function（）上{
$page.remo