Member Avatar for arosemena

i need an absolute div to scroll down as the page does,the div center itself automactly on the browser resize, heres how i have it,

<div " id="window1" style=" display:none; position:absolute; left:50%; margin-left:-200px; top:50%; margin-top:-200px; width:400px; height:400px; background-color:#963"></div>

the problem is that it doesnt scroll, what can i do to make it follow the page?

  • 3 Contributors
  • 3 Replies
  • 70 Views
  • 17 Hours Discussion Span
  • Latest Post Latest Post by JugglerDrummer

Dani AI

Generated

Short recap and why the fix worked. wanted a box that stays centered on the screen while the page scrolls and when the browser is resized. 's suggestion to switch from absolute positioning to a viewport-based approach solved that: the element is then anchored to the visible window instead of the document flow. That is why it "followed" the page the way you expected.

Practical tips to make the behavior robust. For true center-on-screen behavior, prefer modern centering techniques that do not rely on fixed numeric offsets (avoid hard-coded negative margins). Use a responsive width (or max-width) so the box scales on small screens, add an appropriate z-index so it sits above page content, and manage keyboard focus/ARIA if the box acts as a modal. Note that centering with auto margins only handles horizontal centering; vertical centering needs a viewport-relative method.

Compatibility and troubleshooting. Test on the browsers and devices you need—older mobile browsers and legacy desktop browsers have historically had quirks with viewport-anchored positioning. If you must support very old browsers, a simple scroll handler that repositions an absolutely positioned element can be used as a fallback. Also check for small HTML errors (stray quotes, missing tags) which can break layout. For reference, see the MDN docs on CSS positioning, CSS transforms for centering, and ARIA dialog guidance:
CSS position - MDN
CSS transform (translate) - MDN
ARIA dialog role - MDN

Recommended Answers

All 3 Replies

Member Avatar for Xlphos

Have you tried using CSS for the style of the page?
CSS is supposed to be used now.

instead of; position:absolute; try position:fixed; fixed is supposed to be relative to the browser window.

Member Avatar for arosemena

that made the trick thank you a lot

Member Avatar for JugglerDrummer

If you want to center it use margin: 0 auto;

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.