CSS - Fixed Position but Relative to Container?

Short answer: no Long answer: The problem with using "fixed" positioning is that it takes the element out of flow thus it can't be re-positioned relative to its parent because it's as if it didn't have one. If, however, the container is of a fixed, known width, you can use something like fixedContainer { position: fixed; width: 600px; height: 200px; left: 50%; top: 0%; margin-left: -300px; /*half the width*/ } jsfiddle.net/HFjU6/1.

Short answer: no Long answer: The problem with using "fixed" positioning is that it takes the element out of flow. Thus it can't be re-positioned relative to its parent because it's as if it didn't have one. If, however, the container is of a fixed, known width, you can use something like #fixedContainer { position: fixed; width: 600px; height: 200px; left: 50%; top: 0%; margin-left: -300px; /*half the width*/ } jsfiddle.net/HFjU6/1.

Like the other guys said, it's pretty much impossible to do with just CSS currently. Here's what I've come up with using jQuery: jsfiddle.net/UNnZQ/1/ var el = $('#my-element'), el_top = el.offset(). Top, el_pos = el.offset().

Left; $(window). Scroll(function() { if (!el. HasClass('fixed') && $(this).scrollTop() > el_top + el.height()) { el.

AddClass('fixed'); el. Css({ "left": el_pos }) } else if (el. HasClass('fixed') && $(this).scrollTop() RemoveClass('fixed'); el.

Css({ "left": "auto" }) } }); CSS #my-element { position:absolute; top:0; right:0; } #my-element. Fixed { position:fixed; right:auto; } The js fires whenever the window scrolls (which can be a resource hog), and adds a "fixed" class to the element and gives it a fixed left position value (whatever it's original value was). Zooming in/out and window resizing will affect the left positioning however.

Maybe someone can clean that part up, but hope this helps nonetheless.

I did something like that awhile back, I was pertty new to js so I'm sure you can do better but here is a starting point function fixxedtext() { if (navigator.appName. IndexOf("Microsoft")! = -1) { if (document.body.

OffsetWidth > 960) { var width = document.body. OffsetWidth - 960; width = width / 2; document. GetElementById("side").style.

MarginRight = width + "px"; } if (document.body. OffsetWidth 960) { var width = window. InnerWidth - 960; width = width / 2; document.

GetElementById("side").style. MarginRight = width + "px"; } if (window. InnerWidth InnerWidth; document.

GetElementById("side").style. MarginRight = "-" + width + "px"; } } window. SetTimeout("fixxedtext()", 2500) } you will need to set your width then it gets the window width and changes the margin every few seconds, I know it heavy but it works.

One problem I can see with this approach is that it relies on a timer (2.5 seconds) and during that time, if the user resizes the window, it will take up to that time for it to correct itself. That's not the best thing when it comes to user experience. Also, if it can be helped, try using event listeners instead of timers.

– Joseph Jul 22 at 18:03 Like I said it a OLD script, one of my first, and have not needed to go back a fix it. So it is not the best , but it can be a good starting point. – Vaughn Jul 23 at 1:17.

I have created this jquery plugin to solve a similar issue I was having where I had a centered container (tabular data) and I wanted the header to fix to the top of the page when the list was scrolled, yet I wanted it anchored to the tabular data so it would be wherever I put the container (centered, left, right) and also allow it to move left and right with the page when scrolled horizontally. Here is the link to this jquery plugin that may solve this problem: https://github. Com/bigspotteddog/ScrollToFixed The description of this plugin is as follows: This plugin is used to fix elements to the top of the page, if the element would have scrolled out of view, vertically; however, it does allow the element to continue to move left or right with the horizontal scroll.

Given an option marginTop, the element will stop moving vertically upward once the vertical scroll has reached the target position; but, the element will still move horizontally as the page is scrolled left or right. Once the page has been scrolled back down passed the target position, the element will be restored to its original position on the page. This plugin has been tested in Firefox 3/4, Google Chrome 10/11, Safari 5, and Internet Explorer 8/9.

Usage for your particular case: $(document). Ready(function() { $('#mydiv').scrollToFixed(); }).

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.