Fixed element relative to parent

Question

I have included a code snippet, I'm trying to position the header and footer so that it is inside of the .main div.

I have no idea why this isn't working. Instead it is spanning across the whole of the viewport.

In this particular layout I can't determine the left position of the parent without JavaScript and I wish to keep it at CSS.

The header and footer should stay in the same place as they are when scrolled.

.main {
  position: absolute;
  left: 60px;
  right: 0px;
  top: 0px;
  height: 50000px;
  background-color: #09f;
}

.parent {
  position: relative:
  width: 100%;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #f00;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #f00;
}

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

Thanks for any help in advance, Jamie

Possible duplicate of [Fixed position but relative to container](https://stackoverflow.com/questions/6794000/fixed-position-but-relative-to-container) — dom_ahdigital, Dec 13 '17 at 13:42
Elements are fixed to viewport, not to parent elements. Position: fixed works not the same as position: absolute. But... you know that .main (and .parent) are 60px from left side, there is no reason why not set `left: 60px` to header/footer too. — pavel, Dec 13 '17 at 13:49
You need to update your question man, i mean you could find some ways around it but if you are being so picky about the solutions just ask a better question. You could make a div of the size of the screen and make overflow-y: scroll or play with flex and inside you can have another one with 5000000px height, that way you can have anything in the first one which can make the ilusion of "fixed" header and footer but i can't really post an answer with such a vague question — Alejandro Camba, Dec 13 '17 at 14:54

score 0 · Answer 1 · answered Dec 13 '17 at 14:00

0

As I wrote in the comment under question, fixed width is counted to viewport, not the parent element. But you can set left: 60px (the same value as content has) to fixed elements.

.main {
  position: absolute;
  left: 60px;
  right: 0px;
  top: 0px;
  height: 50000px;
  background-color: #09f;
}

.parent {
  position: relative:
  width: 100%;
}

.header {
  position: fixed;
  top: 0;
  left: 60px;
  right: 0;
  background-color: #f00;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 60px;
  right: 0;
  background-color: #f00;
}

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

answered Dec 13 '17 at 14:00

pavel

26,538
10
45
61

I can't use this method unfortunately as the left position is variable. It is unknown unless I use JavaScript. – Jamie Bonnett Dec 13 '17 at 14:03
You set `left` to `.main` - it means you know it and you can set it here the same way as for `.main`. It can be set by JS, it doesn't matter how. – pavel Dec 13 '17 at 14:04
Like I said it's not a "fixed" value, that 60px could be any value as it is variable. This is not possible for me. – Jamie Bonnett Dec 13 '17 at 14:07
@JamieBonnett: how (where) you set this value for `.main`? – pavel Dec 13 '17 at 14:07
It's set within a JavaScript component, and I can't access where is it set. I'm looking for a purely CSS based answer. – Jamie Bonnett Dec 13 '17 at 14:09
@JamieBonnett: doesn't exist something like _set fixed position and take size from parent_ in CSS. You need to set this value in your JS component, in the same place where this value is set for `.main` element. There is no other way. If you mean it'snot possible for you as you wrote above, good luck! – pavel Dec 13 '17 at 14:11
Ok thank you for that. Is there another approach I could take? – Jamie Bonnett Dec 13 '17 at 14:14
@JamieBonnett: what another? CSS don't know it. JS component where `.main` is set is out of your range you said. If you have an access to HTML template, you can put short JS there - count what is the `left` for `.main` and set it to those two fixed elements. No more options here. – pavel Dec 13 '17 at 14:17
@JamieBonnett: https://jsfiddle.net/62zggk4r/ - `l` variable returns the current `left` value for `.main` element and set it for both, header and footer. – pavel Dec 13 '17 at 14:26
It's just not that simple for the design of the app and I'm not at liberty to explain why. Thank you anyway :). – Jamie Bonnett Dec 13 '17 at 14:29

Fixed element relative to parent

1 Answers1