Element with fixed position

Question

I need to have my element's position set to fixed because I want to use it as a header in scrollable div. I also need to specify the elements poisition at top:0 and right:0

If I use those properties together it doesnt work. How can I solve this;

 position:absolute;
 top:0;
 right:0;

works but I need to have position fixed..

If I use position fixed the div is position over the whole document not inside my div where I append it...

Fiddle:http://jsfiddle.net/TP2cp/

possible duplicate http://stackoverflow.com/questions/10243991/position-absolute-without-setting-top-left-bottom-right — शेखर, Apr 08 '13 at 10:00

dsgriffin · Answer 1 · 2013-04-08T10:17:09.983

Who said you couldn't use those properties together?

position:fixed;
top:0;
right:0;

Try it out yourself in this example jsFiddle here.

HTML:

<div id="theDiv">Example Div</div>

CSS:

#theDiv { position:fixed; top:0px; right:250px; }

In reply to OP's edit:

You can't have a fixed positoned div inside a container div like that, as making it a fixed div will take it out of the flow. You should use position:absolute inside of a container div with position:relative if you plan on having it fixed inside another div.

Take a look at my new jsFiddle here.

HTML:

<div id="container">
    Container Div
    <div id="fixed">Child Div</div>
</div>

CSS:

#container {
    width: 400px;
    position:relative;
}

#fixed {
   position:absolute;
   top:0px;
   right:0px;
}

Vucko · Accepted Answer · 2013-04-08T10:47:13.800

1

Use position:fixed.

Example:

HTML

<div class="main">
    <div id="header"><p>Header</p></div>
</div>

CSS

.main{
    width:100%;
    height:2000px;
}

#header{
    width:100%;
    height:100px;
    position:fixed;
    top:0;left:0;
    background:yellow;
}

JSFiddle.

UPDATE

A solution with width:inherit; :

JSFiddle#2.

edited Apr 08 '13 at 10:47

answered Apr 08 '13 at 10:01

Vucko

20,555
10
56
107

This works but my header is displayed over the whole document not inside my div where I append it. – Jacob Apr 08 '13 at 10:03
@Jacob You can try to put the _fixed_ div outside the _parent_ div. [exampe](http://jsfiddle.net/m8Y3q/1/). – Vucko Apr 08 '13 at 10:14
Can you check my example in the wuestion which has all the correct css I want – Jacob Apr 08 '13 at 10:15
Yes like that except one thing.. the width of the parent is dynamic. If I set width to 100% it will expand my div to the whole page. – Jacob Apr 08 '13 at 10:26
@Jacob you can do that with pure **CSS** because _position:fixed;_ puts the element out of its flow, but with JS you can. Solution with [JQuery](http://jsfiddle.net/TP2cp/2/). – Vucko Apr 08 '13 at 10:36
@Jacob I stand corrected ! A solution with **pure CSS** and **width:inherit** [JSFiddle](http://jsfiddle.net/TP2cp/3/). – Vucko Apr 08 '13 at 10:44

score 0 · Answer 3 · answered Apr 08 '13 at 09:59

0

Why not:

position:fixed;
top:0;
right:0;

answered Apr 08 '13 at 09:59

Eli

14,779
5
59
77

score 0 · Answer 4 · answered Apr 08 '13 at 10:05

0

the problem is how did you positioned the scrollable div? if I have understand what you want I think you just need to put the header outside the scrollable div

answered Apr 08 '13 at 10:05

chickpeas

443
5
16

Element with fixed position

4 Answers4