CSS percent question-who is the percentage of ' top ', ' left ', ' translate '?

For example top , the method of attribute, left transform translate their percentage is compared with who?

top, left is based on the parent element:

.parent {    position: relative;    background-color: rgb(243, 225, 225);    height: 100px;    width: 240px;}.child {    text-align: center;    width: 100px;    background-color: cornflowerblue;    position: absolute;    left: 50%;    top: 50%;    transform: translate(-50%, -50%);  }

Translate parameters: Left (x-coordinate) and top (y-coordinate) positional parameters,

If it is a percentage, it will be referenced by its own length of width top:0; left:0 :

left 50% When set, div.child the left and the top distance is half the div.parent width;

CSS percent question-who is the percentage of ' top ', ' left ', ' translate '?