Question

是否有任何常见的原因：position:fixed不会将某个元素排除在流量之外？我以前从未见过这个通常固定的元素总是应用元素到窗口。

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

范围？我使用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 =＆＃39;每周＆＃39; xhr请求将 inner-weeklytegories-header置于其中。

Answer 1

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

据我所知，至少有一种可能发生的情况：

如果元素位于css转换元素中：

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

转换以外的任何计算值都不会导致堆叠上下文和包含块的创建。该对象充当固定位置后代的包含块。

为什么位置：固定不会使一个元素流出？

1 个答案: