Please Help me understand this CSS snippet

the code snippet in which i am having problem is given below.

.heart {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background-color: pink;
    height: 50px;
    width: 50px;
    transform: ;

Now my doubt is how is the positioning working here.

-> i understand when we use aboslute positioning , the element is placed in absolute reference to the closest positioned ancestor(CPA) and if not found it goes recursively back until the ancestor is found or at last reach to the body element and consider it CPA. which is the case here.

-> now the top property of the element shifts 0 unit away from the top w.r.t CPA as mentioned in the code snippet.

->now the right property of the element shift the element 0 unit away from the right w.r.t CPA .

->now the bottom property is used , which according to me should override the top property , but it didn’t , and still remained at the top, so i assume my visualisation is wrong here

-> now the left property is written , when this is applied the element shifts to the top left w.r.t CPA , so it now overrides the right property , but in case of top and bottom , bottom didn’t do so.

-> what i observed till now is no matter where you write top and left property when used with absolute positioning , right and bottom aren’t affecting the positioning of the element if top and left are present .

!!! now the genuine problem

when margin:auto is introduced in the code, the game completely changes, and the element is positioned in the center of the body(vertically and horizontally) .
how did it happen?
if we use margin:auto without using absolute positioning , the same isn’t achieved (it is getting centered only horizontally not vertically.)

Please someone elaborate as i am new to it and and not able to reach the conclusions.

The centering technique is explained in this smashingmagazine article

No, it doesn’t override anything. Imagine your element is a stretchy rectangular piece of fabric, and you’re pinning it to a [larger sized] rectangular board.

  • top:0 means you attach the top edge of the fabric to the top edge of the board.
  • left:0 means you attach the left edge of the fabric to the left edge of the board.

It’s a rectangle on a rectangle, don’t need to stretch it for those first two. But then:

  • right:0 means you stretch it and attach the right edge of the fabric to the right edge of the board.
  • bottom:0 means you stretch it and attach the bottom edge of the fabric to the bottom edge of the board.

(Hope this makes sense?)