0

All:

Thanks for help.

The html structure is like:

<div id="container" style="position:relative; top:100px; left:100px; width:200px; height:300px; overflow: auto;">
    <div id="absoluteinner" style="position:absolute; top:10px; left:10px; width:100px; height:100px; background-color:red;">
    </div>
    <div id="staticinner" style="width:100px; height:800px; background-color:purple;">
    </div>
</div>

I thought that absoluteinner can keep a fixed position relative to its container, but when I scroll the container, the absoluteinner moves as the staticinner. How can I make it position fixed?

Kuan
  • 11,149
  • 23
  • 93
  • 201

3 Answers3

1

Look at the jsfiddle I created for you. Just give it position fixed, if you don't set top and left explicit, it will inherit for the parent, making it fixed for the parent and not for the window. So look at the css I wrote.

Remember if you set explicit top and left offset it will be referenced to the window, but if you make this trick, inherit from the parent and instead of using top and left you use margin-top and margin-left you will have your element fixed to the parent element and the offset given by the margin.

http://jsfiddle.net/carloscalla/q6ffnm09/

body{
    margin: 0;
}
#absoluteinner{
    position: fixed;
    margin-top: 10px;
    margin-left: 10px;
    top: inherit;
    left: inherit;
}

NOTE: margin: 0; of body is just to correct the margin given by the jsfiddle.

UPDATE: What you want to achieve can not be done with the html structure you have right now. You will have to wrap up your container in another div and inside this div put your #absoluteinner so #absoluteinner and #container are siblings. Then you give the parent position: relative; , and your #absoluteinner position: absolute; , but #absoluteinner does not get into the #container scroll, they are separated but you simulate that they are one inside of the other one.

I created an extra #outter-container so you see another scroll and you see that #absoluteinner is "fixed" to #container.

If you use position fixed you will not be able to achieve this since position fixed takes the element out of flow, you can get that working for the basic scenario as the first answer I gave you but not for what you want to do if you want to insert this piece of html inside another containers.

Take a look at this jsfiddle I created for you: http://jsfiddle.net/carloscalla/gwphpfgy/4/

See the

<div id="container-wrapper" ...

this wraps up your container so you simulate a position fixed but this works inside other containers as well, as this sticks to the wrapper. Note the z-index: 1; just because it was going behind the purple box, you can avoid this by reordering the html structure but this is not a big deal.

Carlos Calla
  • 6,556
  • 2
  • 16
  • 23
  • Thanks for help. It works for this case, but if I add another container outside the container, the absolute div will keep fixed position to the out most container, which is not what I want – Kuan Aug 21 '14 at 15:54
  • Let me try it for you, you mean outside the #container add another container width position static? and you want the #absoluteinner to be fixed to #container right? – Carlos Calla Aug 21 '14 at 15:57
  • Basically, Yes. Cos I want to put the structure right now anywhere (inside other structure and still work as a independent widget) on the page. – Kuan Aug 21 '14 at 15:58
  • I'll give you an update with better explanation, wait a minute. – Carlos Calla Aug 21 '14 at 16:02
  • 1
    Take a look at the update, there is the answer to your scenario – Carlos Calla Aug 21 '14 at 16:40
0

I'm not quite sure wether i understood your question correctly, but I think, you can make its position:fixed and use margin to push it into the container.

Maharkus
  • 2,841
  • 21
  • 35
  • Thanks for help, but I do not quite understand why fixed position can be used for position a element relative to specific element, I thought fixed position is relative to browser window. Could you give a jsfiddle example or some detail talk? – Kuan Aug 21 '14 at 15:26
  • Yes, I was going to, I don't know why I didn't submit one immediately.http://jsfiddle.net/hjmecL9w/ – Maharkus Aug 21 '14 at 15:28
  • Thanks for help. I am afraid that this way is not what I want, cos I can not decide the margin when dynamically change the position of the container. – Kuan Aug 21 '14 at 15:33
  • Well, I don't think that is possible without some Javascript. Google can probably tell you more than I can, sorry :( Edit: Take a look here, maybe this will help: http://stackoverflow.com/questions/5209814/can-i-position-an-element-fixed-relative-to-parent – Maharkus Aug 21 '14 at 15:36
  • so sad, but thanks though. I will try to google more solution see if any of them works. THanks man! – Kuan Aug 21 '14 at 15:38
0

Place absoluteinner inside of another position:absolute div and change absoluteinner'sposition to fixed. Then style the outer div with the position you want, relative to the parent, not the page. Do not put any position on the fixed element.

<div id="container" style="position:relative; width:200px; height:300px; overflow: auto;">
    <div style="position:absolute; top:10px; left:10px; width: 100px;">
        <div id="absoluteinner" style="position:fixed;  width:100px; height:100px; background-color:red;"></div>
    </div>
    <div id="staticinner" style="width:100px; height:800px; background-color:purple;"></div>
</div>

JSFiddle

quw
  • 2,844
  • 1
  • 26
  • 35
  • Thanks for help. Could you talk a little more why this way works? Such as why the fixed position can make an element relative to its container rather than to the browser window? – Kuan Aug 21 '14 at 15:35
  • 1
    Normally `position:fixed` is relative to the page, but since there are no `top` or `left` attributes on the fixed element it is not moved out of its parent. The positioning is instead done by the `position:absolute` wrapper, which is always relative to the first parent with `position:relative` attribute or the page. Fixed position on its own would not be relative to the parent, and you would have to use absolute coordinates. For more information, see this post: http://stackoverflow.com/a/11833892/2506493 – quw Aug 21 '14 at 15:40
  • Thanks Man! I guess the working solution is most like yours and Carlos's – Kuan Aug 21 '14 at 17:23