Why Is the Child Div Offset

Why is the child div offset?

This clearly is a rendering bug in Chromium-based browsers, as I was able to reproduce the issue both in Chrome and Edge at 250% zoom level, and in the code pen also at 125% zoom level (current stable version, MacOS 12.0.1, ARM).

I've raised an issue in the chromium bug tracker: https://bugs.chromium.org/p/chromium/issues/detail?id=1275530

Css position a child div alignment by using offset

Parent DIV: position: relative
Child DIV: position: absolute; top: 0; left: 0;

When the child element has position: absolute, its coordinates are relative to its offset parent. By default, the body is an offset parent, but setting position: relative on the Parent DIV causes it to become an offset parent.

Child div has an offset border

Add box-sizing: border-box; in .overlay will work.

.container {

  background: pink;

  width: 40rem;

  height: 25rem;

  display: flex;

  flex-wrap: wrap;

}

.box {

  background: yellow;

  width: 8rem;

  height: 8rem;

  margin: 1rem;

  position: relative;

}

.overlay {

  border: 0.75rem solid red;

  position: absoulte;

  width: 100%;

  height: 100%;

  box-sizing: border-box; /* Use box-sizing */

}

<div class="container">

  <div class="box">

    <div class="overlay"></div>

  </div>

  <div class="box">

    <div class="overlay"></div>

  </div>

  <div class="box">

    <div class="overlay"></div>

  </div>

  <div class="box">

    <div class="overlay"></div>

  </div>

  <div class="box">

    <div class="overlay"></div>

  </div>

</div>

Get position/offset of element relative to a parent container?

element.offsetLeft and element.offsetTop give an element's position with respect to its offsetParent (which is the nearest parent element with a position of relative or absolute.)

Strange offset space between button as parent container and div as child

<button> usually has margin, padding, and border set by the browser's default CSS. Clearing those is usually my first step with making sense of the dimensions of the element itself and its children.

You also might try setting the button to be display: inline-block (and -moz-inline-box for Firefox < 3), which might give you a little more direct control of its styles and those of its children.

Position relative div getting different offset

As mentioned in MDN HTMLElement.offsetTop returns position relative to the parent element . So in your example document.getElementById('div2-child').offsetTop returns top position relative to div2

So, if you want the position relative to window(viewport) you need to add child position with it's parent position like below:

document.getElementById('demo').innerHTML = document.getElementById('div1').offsetTop + " " + document.getElementById('div2').offsetTop + " " + (document.getElementById('div2-child').offsetParent.offsetTop + document.getElementById('div2-child').offsetTop);

or you could use element.getBoundingClientRect() as below:

document.getElementById('demo').innerHTML = document.getElementById('div1').offsetTop + " " + document.getElementById('div2').offsetTop + " " + (document.getElementById('div2-child').getBoundingClientRect().top);

get child element offset position from grandparent

If I am understanding correctly, you should be able to repeat your strategy for the position of the parent in the grandparent.

var childPos = $('.child').position();
console.log(childPos.top) // top position of child from parent
var parentPos = $('.parent').position();
console.log(parentPos.top) // top position of parent from grandparent
var childGrandparentPosTop = childPos.top + parentPos.top;
console.log(childGrandparentPosTop); // top position of child from grandparent

---

Related Topics