Question

我认为这很奇怪但是，当我使用Chrome工具在检查员网站上测试我的网站时，position:fixed中的标题无效。在所有其他浏览器和屏幕维度工作良好。只是在检查员网站上不起作用。

.site-header{ display: block;}
.header-top{
	background-color: #87b7bb;
	height: 90px;
	position: fixed;
	width: 100%;
	z-index: 1;
		-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.66);
    -moz-box-shadow: 0px 00px 10px 0px rgba(0,0,0,0.66);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.66);
}
.block{
    position:static;
 background-color: #000;
   height:1000px;
  width:100%;
}

<div class="site-header" >
		<div class="header-top">
		</div>
</div><!-- #masthead -->
<div class="block">
 <p> 

 </p>
</div>

当我使用检查工具时，我可以更改所有设置，我会看到更改，但固定位置不起作用。

此外，只有向下滚动才会发生这种情况。当我向上滚动时，我看到标题以正确的方式在我的窗户顶部移动。

有人可以帮助我吗？

Answer 1

您是否尝试过将top：0添加到.header-top？

此外，而不是width 100%

您是否尝试过使用以下

.header-top{
  background-color: #87b7bb;
  height: 90px;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.66);
  -moz-box-shadow: 0px 00px 10px 0px rgba(0,0,0,0.66);
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.66);
}

固定的位置无法在chrome中向下滚动 - 检查器设备

1 个答案: