CODEWITHSUNDEEP
htmlcssfixed
John Abraham
John Abraham

Reputation: 18791

Why would position: fixed not take an element out of flow?

Is there any common occurrences of why: position:fixed wouldn't take an element out of flow? I've never seen this before typically fixed always applies the element to the window.

I have a large applications from which I've applied position:fixed to a nested element. The element is nested because scoped variables. I would link some html and css but nothing seems out of the ordinary? so I really don't know what to display.

scopeing? I'm using angular/ui-router and I need the proper controller variables.

Main.html: This way works when i bring the inner-weekly-categories div out side of ad-container but it messes up my scoping

<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;
}

The ui-view='weekly' does an xhr request to place inner-weeklytegories-header inside of it.

Upvotes: 2

Views: 2575

Answers (1)

LcSalazar
LcSalazar

Reputation: 16841

The only way for a fixed positioned element not taking the viewport as its boudaries, would be if it's nested to an element that acts as a stacking context for fixed elements.

As far as I know, there is at least one situation where it can occur:

If the element is inside a css transformed element:

According to W3 css transform docs, a css element that has a transform value, such as scale, rotate, etc, start acting as a context container for inner fixed elements.

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.

Upvotes: 7

Related Questions