Member Avatar for serkan sendur
serkan sendur 821 Banned

I had been trying to put specific elements to specific positions on my web pages but i had never found a solution until today. The solution was very easy to implement indeed.
Make the container's position relative and the content's position absolute. To make it work cross browser, avoid using td as container for relatively absolute positioning because firefox doesnt support that. By using relatively absolute positioning you can combine the power of the flow and the grid layout options.

  • 1 Contributor
  • 0 Replies
  • 71 Views

Dani AI

Generated

highlighted a long-used technique for precise placement. For layouts that need to scale and stay accessible today, consider using modern CSS layout tools instead of relying on positional hacks. CSS Grid gives predictable, two-dimensional placement; Flexbox covers single-axis alignment. These approaches avoid many cross-browser quirks and make responsive adjustments simpler.

A minimal Grid example to place an element into a fixed column without removing it from normal flow:

<div class="page">
  <main class="content">Main content</main>
  <aside class="side">Sidebar/widget</aside>
</div>

<style>
.page {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 12px;
}
.side { grid-column: 2; }
</style>

When absolute/fixed positioning is still necessary (overlays, tooltips, anchored badges), watch stacking contexts and transforms since they affect z-index and hit testing. Avoid using table cells as generic layout containers; if tables must be used, wrap positioned content in a block-level element. Test in current target browsers and with the DOM order kept logical for keyboard and screen-reader users. For reference, the MDN docs on CSS Grid Layout, Flexbox basics, and stacking contexts are useful starting points.

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.