CODEWITHSUNDEEP
htmlcss
SnafuBernd
SnafuBernd

Reputation: 271

CSS position fixed div still displayed in respect to parent element

I have a the following mark-up:

<nav class="np-global-menu">
        <div class="np-overlay"></div>
        <ul>
            <li><a href="#">Create</a></li>
            <li><a href="#">See</a></li>
            <li><a href="#">Start</a></li>
        </ul>
    </nav>

And the follwoing CSS:

.np-global-menu {
position: fixed;
top: 50px;
bottom: 0;
left: 0;
width: 100%;
z-index: +2;
-webkit-transform: translateX(-250px);
-moz-transform: translateX(-250px);
transform: translateX(-250px);
-webkit-transition: -webkit-transform 3s;
-moz-transition: -moz-transform 0.3s;
transition: transform 3s;
}


.np-global-menu ul {
position: fixed;
left:0px;
width: 250px;
color: #7f8c8d;
background: white;
height: 100%;
z-index:+2;
 }

My understanding now is that even if I translate the nav element outside of the screen the ul-list should stay on the screen as it is position fix so the position is relative to the window screen. Do I misunderstand position: fixed?

Or how do I have to style an element inside the nav to let it be NOT influenced by the nav translateX?

Upvotes: 2

Views: 1903

Answers (2)

Danield
Danield

Reputation: 125443

Because you are using transforms, the element with fixed positioning will become relative to the element with the transform - not the viewport

Take a look at the spec: The Transform Rendering Model

Specifying a value other than ‘none’ for the ‘transform’ property establishes a new local coordinate system at the element that it is applied to.

Look at this FIDDLE in a webkit browser to see this in action

<div class="wpr">
    <div class="fixed"></div>
</div>

.wpr
{
    width: 200px;
    height:1000px;
    background: pink;
    position:relative;
    margin: 0 200px;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
.fixed
{
    width: 200px;
    height:200px;
    margin: 50px;
    position: fixed;    
    top:0;
    left:0;
    background: aqua;
}

Upvotes: 4

Paulo Victor
Paulo Victor

Reputation: 4102

Not sure I understand very well your problem, but i think o need change your class .np-global-menu to .np-overlay in css document

Upvotes: 0

Related Questions