CODEWITHSUNDEEP
htmlcss
shashwat
shashwat

Reputation: 8004

Why is position fixed not working?

I am just trying to stick header to the top. I have set position to fixed and top:0px; and left:0px.

I have uploaded my code here.

Below is the CSS class for header:

header.header
{ 
    background: #861912;
    padding:5px 10px;
    overflow: hidden;
    height: 43px;
    position: fixed;
    width: 100%;
    top: 0px;
    left: 0px;
}

Please help me finding out what stopping my header to stick at top.

Upvotes: 0

Views: 157

Answers (3)

Mohinder Singh
Mohinder Singh

Reputation: 1830

Just put the Navbar out of other divs and directly inside body and increase it's z-index, this way it will work fine.

Upvotes: 2

sandy
sandy

Reputation: 1

This problem occur by transform css property. try it after remove transform from .container

Upvotes: 0

SVSchmidt
SVSchmidt

Reputation: 6517

The problem seems to be this line:

.container {
    ...
    -webkit-transform: translateZ(0) translateX(0) rotateY(0deg);
}

(and, of cource, the variant without prefix too).

If I remove it via Developer Tools, everything works fine.

But I'd rather move that <header> completely outside the container.

Upvotes: 1

Related Questions