把设置祖先元素的代码注释了,偏移标尺不就变成视口么?为什么结果还是还是相对祖先元素偏移?

把设置祖先元素的代码注释了,偏移标尺不就变成视口么?为什么结果还是还是相对祖先元素偏移?

<!DOCTYPE html>

<html>

<head>

<meta type="text/html";charset="UTF-8">

<title>Document</title>

<style type="text/css">


body{

height:800px;

overflow: auto;

}

.logo{

width: 100%;

height:50px;

background: gray;

}

.nav{

position: sticky;

top:0px;

width: 100%;

height: 50px;

background: blue;

color: #ffffff;


}

.content{

/*position: relative;*/

height: 150px;

overflow: scroll;

}

</style>

</head>

<body>

<div class="logo">

想象我是网站头图

</div>

<div class="content">

<P>假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字

假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 

   假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 

</P>

<P>假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字

假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 

   假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字

</P>

<div class="nav">

想象这里是一堆的bannner 导航按钮|编辑|发布|

 </div>

<div>

<p>假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字

假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 

   假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字

</p>

<p>假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字

假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 

   假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字

</p>

<p>假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字

假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 

   假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字

</p>

<p>假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字

假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 

   假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字

</p>

<p>假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字

假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 

   假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字

</p>

<p>假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字

假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 

   假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字

</p>

<p>假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字

假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 

   假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字

</p>

<p>假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字

假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 

   假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字

</p>

<p>假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字

假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 

   假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字

</p>

<p>假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字

假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 

   假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字

</p>

<p>假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字

假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 

   假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字

</p>

<p>假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字

假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 

   假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字

</p>

<p>假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字

假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 

   假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字

</p>

</div>

</div>

 

</body>

</html>


正在回答

登陆购买课程后可参与讨论,去登陆

1回答

position: sticky;元素先按照普通文档流定位

因为.logo部分是标准文档流,所以在 logo的下面固定


问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师