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.