Lets say for example that we have this HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="css/index.css" type="text/css">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <div class="mainContainer">
        <div class="subContainer">
            <div class="subSubContainer">
                <div class="someText">
                    some text
                </div>
            </div>
        </div>
    </div>

</body>
</html>
and this CSS:
.mainContainer {
    border: 1px solid rgb(0, 0, 0);
    width: 400px;
    height: 400px;
    position: relative;
    left: 100px;
    top: 100px;
}

.subContainer {
    border: 1px solid rgb(0, 0, 0);
    width: 200px;
    height: 200px;
    position: absolute;
    left: 100px;
    top: 100px;
}

.subSubContainer {
    border: 1px solid rgb(0, 0, 0);
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50px;
    top: 50px;
}

.someText {
    left: 18px;
    top: 38px;
    position: absolute;
}
Live example:
some text







Now we will convert just width and height of subContainer in css to percentage, and formula looks like:

width: calc(100 * 200% / 400);
height: calc(100 * 200% / 400);

Where 200% is 200px from subContainer, 400 is 400px from mainContainer and we multiply it with 100 in order to convert calculation to percentage.
The whole css would look something like:

html, body
{
    height: 100%;
}

.mainContainer {
    border: 1px solid rgb(0, 0, 0);
    width: calc(100*400%/1859);
    height: calc(100*400%/1089);
    position: relative;
    left: 100px;
    top: 100px;
}

.subContainer {
    border: 1px solid rgb(0, 0, 0);
    width: calc(100 * 200% / 400);
    height: calc(100 * 200% / 400);
    left: calc(100 * 100% / 400);
    top: calc(100 * 100% / 400);
    position: absolute;
}

.subSubContainer {
    border: 1px solid rgb(0, 0, 0);
    width: calc(100 * 100% / 200);
    height: calc(100 * 100% / 200);
    position: absolute;
    left: calc(100 * 50% / 200);
    top: calc(100 * 50% / 200);;
}

.someText {
    left: 18px;
    top: 38px;
    position: absolute;
}
Notice that I added:

html, body { height: 100%; } and formula to calculate height looks like:

height: calc(100*400%/1089);

Because height of my view port is 1089.