html - 为什么位置: fixed not take an element out of flow?

Question

是否有任何常见的原因:position:fixed 不会使元素脱离流程？我之前从未见过这种情况，通常 fixed 总是应用元素到窗口。

我有一个大型应用程序，我从中将 position:fixed 应用于嵌套元素。该元素是嵌套的，因为范围变量。我会链接一些 html 和 css 但似乎没有什么异常？所以我真的不知道要显示什么。

作用域？我正在使用 angular/ui-router，我需要适当的 Controller 变量。

Main.html:当我将 inner-weekly-categories div 带出 ad-container 时，这种方法有效，但它弄乱了我的范围

<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

固定定位元素不将视口(viewport)作为其边界的唯一方法是将其嵌套到充当固定元素的堆叠上下文的元素。

据我所知，至少有一种情况会发生:

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

根据 W3 css transform docs ，具有 transform 值的 css 元素，例如 scale、rotate 等，开始充当内部固定元素的上下文容器。

Any computed value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.