文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >位置:固定在Chrome和Firebox中不工作，因为透视图属性

问位置:固定在Chrome和Firebox中不工作，因为透视图属性
EN

Stack Overflow用户
提问于 2017-08-11 00:22:08
回答 1查看 46关注 0票数 2

我试图保持一个div对象固定在窗口独立于用户滚动位置。

我以为这已经结束了

代码语言：javascript
复制
position: fixed

属性，但在Chrome和Firefox中，这在我的例子中似乎不起作用，而在Safari中却起作用？我把这件事追查到

代码语言：javascript
复制
perspective: 1500px

属性，我给出了一个父div的属性。我在下面创建了一个简化的代码片段，这说明了这个问题。

如果您转到css并从navbar_wrapper中删除透视图属性，那么红色框实际上是固定不变的。请注意，在Safari中，它一直在工作，而在Chrome & Firefox中，它只在删除透视图元素之后才能工作。知道这是怎么回事吗？

​

代码语言：javascript
复制
#navbar_wrapper {
  display: flex;
  align-items: stretch;
  perspective: 1500px;
  position: relative;
  left: 0;
  z-index: 2;
  padding: 50px 0 0 0;
  min-height: 100%;
}

#basket {
  position: fixed;
  max-width: 20%;
  left: 80%;
  top: 60px;
}
代码语言：javascript
复制
<div id="navbar_wrapper">

  <div id="product_basket">
    <div id="basket" style="background:red">
      stsdjhgfjhgadf
    </div>
  </div>

  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
</div>

​

google-chrome
html
css
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-08-11 00:42:10

As explained in this post，

perspective建立了一个与position: relative类似的包含块。

所以您的固定div是相对于#navbar_wrapper而不是相对于窗口被固定的。

解决方案是将#product_basket移出#navbar_wrapper，如下所示：

​

代码语言：javascript
复制
#navbar_wrapper {
  display: flex;
  align-items: stretch;
  perspective: 1500px;
  position: relative;
  left: 0;
  z-index: 2;
  padding: 50px 0 0 0;
  min-height: 100%;
}

#product_basket {
  position: fixed;
  max-width: 20%;
  left: 80%;
  top: 60px;
}
代码语言：javascript
复制
<div id="product_basket">
  <div id="basket" style="background:red">
    stsdjhgfjhgadf
  </div>
</div>
<div id="navbar_wrapper">
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
</div>

​

票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/45625221

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档