Почему этот блок не центрируется ровно?

Question

[dhat]

Речь о зеленом прямоугольнике, по идее он же должен быть равноудаленным от всех границ красного квадрата, т.е. ровно по центру? codepen.io/dhatt/pen/ORQWyK

Answer 1

[automatik]

position: relative; для .test1 укажите. Без этого зеленый прямоугольник цепляется к body.

www.w3schools.com/cssref/pr_pos_top.asp

For absolutely positioned elements, the top property sets the top edge of an element to a unit above/below the top edge of its nearest positioned ancestor. Note: If an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling. Note: A "positioned" element is one whose position is anything except static.

Tip: A positioned element is an element with the position property set to: relative, absolute, or fixed.

Comments

[dhat]

Спасибо! Упустил этот ньюанс совсем.