I have a single page landing site that is mostly a JPG image that will eventually use HOT SPOTS to link to other websites. The only real content on the page is a Bio which I have placed in a scrolling area and positioned on the image as “Absolute”. Unfortunately the scrolling part is mis-positioned in Chrome but looks fine in IE8 and Safari. If it were strictly an IE8 issue I could force it to be in the right place but because it is only misplaced in Chrome, I do not know how to fix it. I suspect it is a CSS issue of some sort but at this point I am baffled. Can someone advise as to what I should do to correct the issue, please? Thanks
The scroller is misplaced in all browsers and it just depends how far the window is open as to where it will appear
You need to create a stacking context for the absolute element by applying position:relative to the parent Content. That will allow the absolute element to be placed in relation to Content and not the viewport. Absolute elements are placed in relation to the nearest ancestor that has a positioned defined (other than static), if none such element exists then the absolute element is placed in relation to the viewport.
e.g.
To confine the absolute element to the Content div do this:.
