Member Avatar for JacktheNoob

Wotcha, folks.

Any idea why:

body {position:absolute}

doesn't follow down in to the web site itself?

eg.

<img src="piccie" style="position:absolute; left:80px; top:100px">

....works fine, whilst.......

<img src="piccie" style="left:80px; top:100px"

....doesn't.

Will including position:absolute in the 'body' CSS declaration not work with img tags?

Many thanks,

Jack.

  • 3 Contributors
  • 2 Replies
  • 202 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by dexterz

Dani AI

Generated

Short answer: position does not “cascade” the way font or color do. As observed, putting a position rule on body won’t automatically make descendants respond to top/left—those offset properties only affect elements that are themselves positioned (i.e., their position is not static). was right to warn about browser differences, and was on the right track with a container — here’s why and how to use it reliably.

Key points to apply immediately:

  • position is not inherited. top, left, right, bottom only work when an element’s position is relative, absolute, fixed, or sticky.
  • An absolutely positioned element is taken out of normal flow and is placed relative to the nearest ancestor that itself has a non-static position (the “positioned” ancestor). If none exists, it falls back to the initial containing block (practical effect: page/viewport behavior varies).
  • Avoid making body absolutely positioned for layout — that removes it from normal flow and can break scrolling, height calculations and cross-browser behavior.

Example pattern (keeps normal flow, gives a predictable origin for absolute children):

<div class="frame">
  <img src="pic.jpg" class="badge" alt="">
</div>
.frame { position: relative; width: 600px; height: 200px; }
.badge { position: absolute; right: 20px; bottom: 15px; }

Troubleshooting tips: use browser devtools to inspect the computed position and the element’s offsetParent; if top/left seem ignored check for position: static or a more specific rule overriding it. For most layouts prefer Flexbox/Grid; use absolute positioning for small, independent overlays and use transform: translate() for visual nudges without affecting flow.

Recommended Answers

All 2 Replies

Member Avatar for 2ndPlatform

Wotcha, folks.

Any idea why:

body {position:absolute}

doesn't follow down in to the web site itself?

eg.

<img src="piccie" style="position:absolute; left:80px; top:100px">

....works fine, whilst.......

<img src="piccie" style="left:80px; top:100px"

....doesn't.

Will including position:absolute in the 'body' CSS declaration not work with img tags?

Many thanks,

Jack.

You have to specify positioning for the different tags in your CSS. So your findings are correct. It doesn't trickle down like you think... and I would make sure to NOT expect it to trickle down in order to accomodate all of the different browsers -- they all treat CSS a little bit differently so make sure your stylesheet is thorough.

Member Avatar for dexterz

Try placing the img inside a container. I strongly recommend to read more CSS-P articles.

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.