2014-09-12 15 views
1

有沒有經常出現的原因:position:fixed不會使元素流出?我從來沒有見過這種情況,通常固定總是將元素應用到窗口。爲什麼會這樣定位:固定沒有流出一個元素?

我有一個很大的應用程序,我已經應用position:fixed嵌套元素。元素是嵌套的,因爲範圍變量。我會鏈接一些HTML和CSS,但沒有什麼似乎與衆不同?所以我真的不知道要展示什麼。

範圍?我使用角度/ ui路由器,我需要適當的控制器變量。

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

+0

可能最好是發表一些代碼 – Luke 2014-09-12 18:35:01

+0

好的給我一下。 – 2014-09-12 18:37:21

回答

4

固定定位元素不將視口作爲其邊界的唯一方法是嵌套到對固定元素充當堆疊上下文的元素。

據我所知,至少有一個情況可以發生:

如果該元素是一個CSS變換的元素:

W3 css transform docs,具有CSS元素一個transform值(如scale,rotate等)開始充當內部固定元素的上下文容器。

對於轉換,任何非計算值都會導致創建堆棧上下文和包含塊。該對象充當固定位置後代的包含塊。

+0

就是這樣。我無意中忽略了一個CSS類,並且有一個transform3D – 2014-09-13 15:06:22

相關問題