position fixed is not working

Question

I have the following html...

<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>

And following css...

.header{
position: fixed;
background-color: #f00;
height: 100px;
}
.main{
background-color: #ff0;
height: 700px;
}
.footer{
position: fixed;
bottom: 0;
background-color: #f0f;
height: 120px;}

But why the header and footer is not fixed, anything I did wrong? I want only "main" to be scrollable and "header" and "footer" to be at a fixed position. How to do?

+-------------------------------------+
|     header                          |  -> at fixed position (top of window)
+-------------------------------------+
|       main                          |
|                                     |
|                                     | -> scrollable as its contents
|                                     |    scroll bar is window scroll bar not of main
|                                     |
|                                     |
+-------------------------------------+
|         footer                      |  -> at fixed position (bottom of window)
+-------------------------------------+

See this fiddle

IE6 understand position properties, but you must just use one. For example, `left`, or `right`, is fine in IE6, but if you use both of them, it doesn't understand. — , Jun 02 '13 at 05:19
@NOX I believe IE6 did not understand "position: fixed" as documented on MDN. See my answer below. — David Gilbertson, Jun 02 '13 at 05:22
@sheriffderek `top` and `left` is fine. Using both `left` and `right`, and, `top` and `bottom` is not working only. If you choose just one from (left/right) and one from (top/bottom) it works correctly. — , Jun 02 '13 at 05:25
basically @C-link here is one of the less than 1% of people in the western hemisphere who have IE 6 - I guessing AOL is the ISP too - — sheriffderek, Jun 02 '13 at 05:25
@NOX Great! because he/she doesn't need to do that anyways! Good to know. — sheriffderek, Jun 02 '13 at 05:31
Do people really give a shi7 about IE6? The amount of "it won't work on IE6" comments on this site is just silly. If people are still using IE6, frankly they deserve to have the worst browsing experience. — ggdx, Nov 03 '14 at 12:51

score 94 · Answer 1 · answered Sep 08 '18 at 08:55

94

My issue was that a parent element had transform: scale(1); this apparently makes it impossible for any element to be fixed inside it. By removing that everything works normally...

It seems to be like this in all browsers I tested (Chrome, Safari) so don't know if it comes from some strange web standard.

(It's a popup that goes from scale(0) to scale(1))

answered Sep 08 '18 at 08:55

OZZIE

6,609
7
55
59

6

I ran into this with a transform3d – mhenry1384 Oct 16 '18 at 18:21
11

Same for `will-change: transform` – Gendos-ua Nov 18 '18 at 21:56
2

Thanks for this! That solved the issue for me as well. – Bharat Mar 15 '19 at 10:26
3

@OZZIE are there any alternatives other than removing transform property from parent element. I have used it for some animations. – ONE_FE Jan 17 '20 at 11:06
@LalindaSampath no, but in all cases I've had this issue I have solved it by just moving it our from the parent either manually or with javascript. In React you can use for example React portal: https://reactjs.org/docs/portals.html :) – OZZIE Mar 05 '20 at 14:14
3

same for ```perspective``` – James McKeown Apr 22 '20 at 19:18
2

same with `backdrop-filter`, I had it on `body`. After removing it worked. – Shubham P Sep 29 '21 at 07:08
1

same with `filter` – BarryCap Jul 17 '22 at 10:02
same with `container-type: inline-size;` – Jules Colle Dec 30 '22 at 14:41
no, it doesnt make element not to be positioned with `fixed`, it just works differently, becouse containing block no longer tied to viewport dimensions. – Nerius Jok Jan 30 '23 at 12:33
same even with `transform: rotate(0deg)` – znn Mar 16 '23 at 19:47
NextPerson: Same with `transform: rotate(1deg)` :P – OZZIE Apr 11 '23 at 10:26

score 50 · Answer 2 · answered Mar 14 '19 at 12:36

50

if a parent container contains transform this could happen. try commenting them

-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);

answered Mar 14 '19 at 12:36

shakee93

4,976
2
28
32

1

Yep, that was it. – Steven Linn Nov 15 '19 at 17:36
`-webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0);` This one also – MD Ashik Nov 27 '19 at 08:27
1

transform: none; also works – Hans Rossel May 09 '22 at 11:12

Mr_Green · Accepted Answer · 2013-06-02T04:45:10.570

27

you need to give width explicitly to header and footer

width: 100%;

Working fiddle

If you want the middle section not to be hidden then give position: absolute;width: 100%; and set top and bottom properties (related to header and footer heights) to it and give parent element position: relative. (ofcourse, remove height: 700px;.) and to make it scrollable, give overflow: auto.

edited Jun 02 '13 at 04:45

answered Jun 02 '13 at 04:25

Mr_Green

40,727
45
159
271

score 17 · Answer 4 · answered Feb 18 '14 at 00:23

17

Double-check that you haven't enabled backface-visibility on any of the containing elements, as that will wreck position: fixed. For me, I was using a CSS3 animation library...

answered Feb 18 '14 at 00:23

user1429980

6,872
2
43
53

1

I was using https://daneden.github.io/animate.css/ >> Removed the animated class and voila! – Erik Grosskurth Jan 23 '18 at 19:18
36

This can also happen if you are setting any form of transform on a container element – Troy Watt Mar 16 '18 at 15:19
@TroyWatt Saved my butt. Thx! – wle8300.com Jun 04 '18 at 19:43
@TroyWatt Oh man, if i didn't read this it would've been a long ride to figure that out. – ricks Sep 06 '18 at 18:41
@TroyWatt You don't happen to know *why* that happens, do you? – Maximillian Laumeister Sep 15 '18 at 01:17
2

@MaximillianLaumeister An element with transform applied creates a new layout context for all of it’s children. This answer provides a good explanation https://stackoverflow.com/a/28157774/811533 – Troy Watt Sep 15 '18 at 16:06
@TroyWatt Thank you kind sir for restoring my sanity after hours of frustration! – Greg Blass Dec 12 '18 at 05:35
in addition to `transform`, a container with `perspective` causes a similar issue – stephenspann Jul 01 '19 at 15:40
For me it was "filter: blur(1px)" on body. It worked after removing it. – hammurabi Jul 07 '19 at 21:01

score 9 · Answer 5 · answered Jun 02 '13 at 04:23

Working jsFiddle Demo

When you are working with fixed or absolute values, it's good idea to set top or bottom and left or right (or combination of them) properties.

Also don't set the height of main element (let browser set the height of it with setting top and bottom properties).

.header{
    position: fixed;
    background-color: #f00;
    height: 100px;
    top: 0;
    left: 0;
    right: 0;
}
.main{
    background-color: #ff0;
    position: fixed;
    bottom: 120px;
    left: 0;
    right: 0;
    top: 100px;
    overflow: auto;
}
.footer{
    position: fixed;
    bottom: 0;
    background-color: #f0f;
    height: 120px;
    bottom: 0;
    left: 0;
    right: 0;
}

score 7 · Answer 6 · answered Feb 06 '19 at 16:26

7

I had a similar problem caused by the addition of a CSS value for perspective in the body CSS

body { perspective: 1200px; }

Killed

#mainNav { position: fixed; }

answered Feb 06 '19 at 16:26

Claud

937
1
12
27

3

Man... this kills me. Thank you for your answer – Johnny88520 Nov 09 '19 at 04:11

score 6 · Answer 7 · answered Sep 20 '22 at 11:44

6

As others pointed out, certain CSS properties on a parent element will prevent position: fixed from working. In my case it was backdrop-filter.

answered Sep 20 '22 at 11:44

Nikolay Dyankov

6,491
11
58
79

Kropek · Answer 8 · 2018-11-16T03:29:42.150

4

This might be an old topic but in my case it was the layout value of css contain property of the parent element that was causing the issue. I am using a framework for hybrid mobile that use this contain property in most of their component.

For example:

.parentEl {
    contain: size style layout;
}
.parentEl .childEl {
    position: fixed;
    top: 0;
    left: 0;
}

Just remove the layout value of contain property and the fixed content should work!

.parentEl {
    contain: size style;
}

edited Nov 16 '18 at 03:29

answered Nov 16 '18 at 03:18

Kropek

41
4

For me, `contain: 'paint'` was the culprit – Zpalmtree Sep 06 '22 at 02:16

score 3 · Answer 9 · answered Feb 27 '20 at 18:26

3

Another cause could be a parent container that contains the CSS animation property. That's what it was for me.

answered Feb 27 '20 at 18:26

Alan P.

2,898
6
28
52

score 3 · Answer 10 · edited Jan 12 '23 at 19:52

3

For anyone having this issue primarily with navbars, not sticking to the top, I found that if any element in the parent container of the positon: fixed; element has a width exceeding 100% - so creating horizontal scrollbars - is the issue.

To solve it set the 'parent element' to have overflow-x: hidden;

edited Jan 12 '23 at 19:52

Chukwuemeka Maduekwe

6,687
5
44
67

answered Mar 28 '21 at 13:54

Nino P

31
5

sheriffderek · Answer 11 · 2013-06-02T05:19:09.720

2

You have no width set and there is not content in the divs is one issue. The other is that the way html works... when all three of fixed, is that the hierarchy goes from bottom to top... so the content is on top of the header since they are both fixed... so in this case you need to declare a z-index on the header... but I wouldn't do that... leave that one relative so it can scroll normally.

Go mobile first on this... FIDDLE HERE

HTML

<header class="global-header">HEADER</header>

<section class="main-content">CONTENT</section>

<footer class="global-footer">FOOTER</footer>

CSS html, body { padding: 0; margin: 0; height: 100%; }

.global-header {
    width: 100%;
    float: left;
    min-height: 5em;
    background-color: red;
}

.main-content {
    width: 100%;
    float: left;
    height: 50em;
    background-color: yellow;
}

.global-footer {
    width: 100%;
    float: left;
    min-height: 5em;
    background-color: lightblue;
}

@media (min-width: 30em) {

    .global-header {
        position: fixed;
        top: 0;
        left: 0;
    }

    .main-content {
        height: 100%;
        margin-top: 5em; /* to offset header */
    }

    .global-footer {
        position: fixed;
        bottom: 0;
        left: 0;
    }

} /* ================== */

edited Jun 02 '13 at 05:19

answered Jun 02 '13 at 04:27

sheriffderek

8,848
6
43
70

2

If you declare the main content fixed, it will not scroll by default (as the window normally would) - add a margin or padding top to it as position relative to offset the fixed header. – sheriffderek Jun 02 '13 at 04:30
1

You can add a conditional hack to the header of your html with style specifically for IE 6 and & where you position the divs absolute or relative or whatever. Seriously, your fixed header and footer aren't the key points to your website - and you shouldn't even have them on smaller screen devices as it will take up needed space, and even iOS doen't handle fixed properly yet... so... yeah... – sheriffderek Jun 02 '13 at 05:29
I'm starting to think that I should explain that you need to drag your browser.. or the iframe in the fiddle I made for you.. larger and smaller to actually understand what is happening. – sheriffderek Jun 02 '13 at 05:30
as long as you don't use relative on a larger container... you could use absolute to the window for the header as well... what a mess. – sheriffderek Jun 02 '13 at 05:33
1

Yeah. This has been solved in more than one way already in this post. – nouveau Jun 02 '13 at 05:36

score 1 · Answer 12 · answered Jun 02 '13 at 04:27

You forgot to add the width of the two divs.

.header {
    position: fixed;
    top:0;
    background-color: #f00;
    height: 100px; width: 100%;
}
.footer {
    position: fixed;
    bottom: 0;
    background-color: #f0f;
    height: 120px; width:100%;
}

demo

score 1 · Answer 13 · answered Jun 02 '13 at 04:30

You didn't add any width or content to the elements. Also you should set padding top and bottom to your main element so the content is not hidden behind the header/footer. You can remove the height as well and let the browser decide based on the content.

http://jsfiddle.net/BrmGr/12/

.header{
position: fixed;
background-color: #f00;
height: 100px;
    width:100%;
}
.main{
background-color: #ff0;
    padding-top: 100px;
    padding-bottom: 120px;
}
.footer{
position: fixed;
bottom: 0;
background-color: #f0f;
height: 120px;
    width:100%;}

score 1 · Answer 14 · answered Oct 11 '21 at 15:23

1

I had the same issue, my parent was set to transform-style: preserve-3d; removing it did the trick for me.

answered Oct 11 '21 at 15:23

yesarpit

119
6

score 0 · Answer 15 · answered Jun 02 '13 at 05:20

We'll never convince people to leave IE6 if we keep striving to deliver quality websites to those users.

Only IE7+ understood "position: fixed".

https://developer.mozilla.org/en-US/docs/Web/CSS/position

So you're out of luck for IE6. To get the footer semi-sticky try this:

.main {
  min-height: 100%;
  margin-bottom: -60px;
}
.footer {
  height: 60px;
}

You could also use an iFrame maybe.

This will keep the footer from 'lifting off' from the bottom of the page. If you have more than one page of content then it will push down out of site.

On a philosophical note, I'd rather point IE6 users to http://browsehappy.com/ and spend the time I save hacking for IE6 on something else.

score 0 · Answer 16 · answered Nov 17 '22 at 19:02

You can use it in the same way because if the parent container has the transform effect, you could create a child where it occupies 100% of the parent container and add a position realtive and then the container that you want to add the position fixed and it works without problems.

score 0 · Answer 17 · answered Jan 30 '23 at 12:41

might be an answer for some cases https://stackoverflow.com/a/75284271/7874122

TLDR position: fixed is attached to containing element, by which element is positioned. if containing block is different than viewport dimensions, fixed element will be placed according to containing block.

position fixed is not working

17 Answers17

Linked