为什么位置:固定不会使元素流出？

Question

是否有任何常见的原因:position:fixed不会使元素流出？ 我从来没有见过这个通常固定之前总是将元素应用到窗口.

我有一个大型应用程序,我已经应用于position:fixed嵌套元素.该元素是嵌套的,因为范围变量.我会链接一些HTML和CSS但似乎没有什么特别的？所以我真的不知道要展示什么.

scopeing？我正在使用angular/ui-router,我需要适当的控制器变量.

Main.html: 这种方式适用于我带来广告容器的内部 - 每周 - 类别div,但它弄乱了我的范围

<div class="inner-weekly-categories-header group">
  <div class="c8-xs c8-sm c8-md product-title">
    <h2>all products</h2>
    <p>results <span>1-{{limitTotal}}</span> of <span>{{categoryProducts.length}}</span></p>
  </div>
  <div class="c8-xs c8-sm c8-md category-filter">
    <input type="text" ng-model="dropdownSelected">
  </div>
</div>

<div class="ad-container" ui-view="weekly">


</div>

CSS:

.ad-container {
    z-index: 5;
    height: 100%;
    position: relative;
    overflow: hidden;   
}
inner-weekly-categories-header {
    color: #969696;
    background: white;
    border-bottom: 1px solid #e7e5e3;
    font-family: 'HelveticaNeueLTCom-Roman', Helvetica, Arial, sans-serif;
    position: fixed;
    z-index: 10;
    top: 70px;
    left: 10%;
    width: 80%;
    margin: 0 auto;
    padding: 8px 0;
}

ui-view ='weekly'执行xhr请求放置 inner-weeklytegories-header在其中.

Answer 1

固定定位元素不将视口作为其基础的唯一方法是,它是否嵌套到作为固定元素的堆叠上下文的元素.

据我所知,至少有一种情况可能发生:

如果元素在css转换元素内:

根据W3 CSS变换文档,其具有的CSS元件transform值,例如scale,rotate等,开始充当用于内部固定元件的上下文容器.

对于变换,除了none之外的任何计算值都会导致创建堆叠上下文和包含块.该对象充当固定定位后代的包含块.