Position:fixed element inside fixed size div

Question

I've spent a few hours looking for an answer to this, but others' scenarios for which solutions have been provided seem to be slightly more straightforward than mine.

Is there a way to have a position:fixed element inside a fixed size div without the element spilling out of the div?

In other words, if the fixed element grows, I'd like scrollbars to appear in the div (horizontal and vertical), but I need the element to remain fixed when you scroll vertically (I'm planning on using JQuery to achieve this).

Thanks in advance.

<style> 
    .container {
        width:200px;
        height:200px;
        border:solid 1px black;
        overflow:scroll;
    }       
    .fixed-element {
        position: fixed;
        width:250px;
        height:100px;
        background-color:red;
        top:10px;       
    }
    p {
        min-width: 300px;
    }
</style>
<body>  
    <div class="container">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <div class="fixed-element">         
        </div>
    </div>  
</body>

EDIT: The overall effect I'm looking for is like with the middle box here: http://demo.rickyh.co.uk/css-position-x-and-position-y/ except applied within a scrollable div instead of the whole viewport.

you will need to use something like `overflow:scroll`, but as mentioned before, please provide some code — MMachinegun, Nov 12 '15 at 14:45

justinw · Answer 1 · 2015-11-12T17:54:00.570

0

position: fixed only works on the viewport, you can't set an element to position: fixed relative to it's parent. Instead you can use position: absolute to mimic fixed behavior.

You can do this, like this fiddle shows.

You can accomplished "pseudo" position: fixed on elements relative to their parents, by wrapping both the parent and the element you want "fixed" in another container.

Here is a fiddle with your code showing the behavior.

If you'd like to prevent wrapping in your element you are going to want to use the white-space property with the nowrap value; to get a scroll bar to show, use overflow: scroll on the element.

You can see that behavior in this fiddle or in the below snippet.

html, body {
    margin: 0;
    padding: 0;
}

.wrap {
    background-color:#ccc;
    position: relative;
}

.a {
    height: 150px;
    overflow-y: scroll;
}

.b {
    margin-top: 300px;
    padding-bottom: 20px;
}

.footer{
    position:absolute;
    bottom:0;
    left:0;
    background-color:#666;
    color:#fff;
    width: 100%;
    white-space: nowrap;
    overflow: scroll;
    padding: 10px 0;
}

<div class="wrap">
    <div class="a">
        top
        <div class="b">bottom</div>
    </div>
    <div class="footer">Some text Some text Some text Some text Some text Some text AAA text Some text Some text AAAA text Some text Some text Some text Some text Some text Some text </div>
</div>

edited Nov 12 '15 at 17:54

answered Nov 12 '15 at 15:12

justinw

3,856
5
26
41

Thanks for the reply. The problem with that approach is if the contents of the "footer" div ("some text") expand beyond the width of the "wrap" container, it spills over the side. I'd like it to not do this, but instead have a horizontal scrollbar appear. – exploring.cheerily.impresses Nov 12 '15 at 15:18
@bodruk you're mis-using the comments section – justinw Nov 12 '15 at 15:24
@user3767420 the `width` won't expand past `wrap` - [See here](https://jsfiddle.net/qzv6894h/1/) - an explicit `width: 100%` is set, it won't expand past it's parent – justinw Nov 12 '15 at 15:26
@Quoid The thing is, I want it to expand (as opposed to wrap), I just don't want it spilling over the edge, whilst keeping a fixed width on the container. In other words, I'd like a horizontal scrollbar to appear within the container. – exploring.cheerily.impresses Nov 12 '15 at 15:47
@user3767420 - ok [here is a fiddle showing that](https://jsfiddle.net/qzv6894h/4/) - if you don't want the element to wrap you need to use the `white-space: nowrap` property/value - i will edit my answer to include this – justinw Nov 12 '15 at 17:51
@user3767420 if this or any answer has solved your question please consider [accepting it](http://meta.stackexchange.com/q/5234/179419) by clicking the check-mark. This indicates to the wider community that you've found a solution and gives some reputation to both the answerer and yourself. There is no obligation to do this – justinw Nov 13 '15 at 11:51

score 0 · Answer 2 · answered Nov 12 '15 at 15:17

The position: fixed property defines the element position related to the page. You should define the parent div as fixed and the child div as relative.

HTML

<div class="parent">
    <div class="child"> ... </div>
</div>

CSS

.parent{
    position: fixed;
    height: 100px;
    overflow-y: scroll;
}

Live Demo

https://jsfiddle.net/5tpmzbpo/

score 0 · Accepted Answer · edited May 23 '17 at 12:03

0

So what I came up with solves your issue, but when you want to scroll when your mouse is over the fixed box (red box) you can't scroll.

Not so sure how important this is.

I added an other element, a .holder and positioned your fixed-element with position: absolute; as you only want it inside your .container

.container {
  position: relative;
  width:200px;
  height:200px;
  border:solid 1px black;
  overflow: hidden;
}       
.fixed {
  position: absolute;
  width: 250px;
  height: 100px;
  max-width: 175px;
  background-color: rgba(255,0,0,0.5);
  top: 10px;
  left: 10px;
}
.holder {
  width: inherit;
  height: inherit;
  overflow:scroll;
}
p {
  min-width: 300px;
}

<div class="container">
  <div class="fixed">
This is "fixed"
  </div>
  <div class="holder">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  </div>
</div>

Edit

For the issue with the red box overlapping the scrollbars I could only think of following:

Add a max-width to your .fixed. I changed it in the snippet aswell.

If you want to find out the exact scrollbar width, as this differs between browsers you will need to use Javascript. You can check out the answers for that here on stackover or on davidwalsch-blog

edited May 23 '17 at 12:03

Community

1
1

answered Nov 12 '15 at 16:32

MMachinegun

3,044
2
27
44

I think you've cracked it! Many thanks for this. I think I can live with the mouse issue. Any ideas how to stop the red square from overlapping the vertical scrollbar though? (i.e. if you set the width of the red square to be 250px). – exploring.cheerily.impresses Nov 12 '15 at 16:48
I don't understand what you mean with overlapping – MMachinegun Nov 12 '15 at 16:56
If you change the width of the red square to 250px, it doesn't spill out of the container, but it does appear in front of the vertical scrollbar... – exploring.cheerily.impresses Nov 12 '15 at 17:14
ooh, okay. I didn't see that because I'm not using a mouse (and therefor no visible scrollbars). I'll take a look – MMachinegun Nov 12 '15 at 17:16
Do you know the width of the `.container`? Does the `.fixed`-element *have* to be wider than the parent? Atm I can't get around your problem... – MMachinegun Nov 12 '15 at 17:36
I do know the width of .container, yes. The .fixed element may be wider than the parent, depending on how much data there is to display (it's a web application). Thanks again. – exploring.cheerily.impresses Nov 13 '15 at 09:05
I made an edit, I don't think I can find a general satisfying solution for this... – MMachinegun Nov 13 '15 at 12:38

score 0 · Answer 4 · answered Nov 13 '15 at 14:41

In the end I took a different approach to solving the problem, and took the .fixed-element outside of the .container, setting it to be the same width as the container. I then put that in a div of its own and set overflow on the div to hidden. Finally, I used JQuery to programatically scroll the .fixed-element div in tandem with the .container. Thanks to everyone who helped.

Position:fixed element inside fixed size div

4 Answers4

Edit