<button id="make_absolute" class="btn btn-primary ml-5 mt-3 mb-3">Toggle Make Absoulte</button>
<button id="make_hidden" class="btn btn-primary m-3"> Toggle Hide with Top and Left -9999px</button>
<div class="parent">
    <p>A line of text</p>
    <div id="child" class="child"></div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa aut iusto nobis? Maxime, commodi. Illum quasi atque a distinctio perferendis ullam molestias odio at ex?</p>
</div>
.parent {
    background: cyan;
    height: 70vh;
    width: 70vw;
    padding: 3em;
    margin-left: 3%;
}

.child {
    background: red;
    width: 70px;
    height: 70px;
    position: none;
}

#make_hidden {
    display: none;
}
View Compiled
let count_make_absolute = 1;
let count_make_hidden = 1;
$("#make_absolute").click(function () {
    count_make_absolute++;
    if (count_make_absolute % 2 == 0) {
        $(".child").css({ position: "absolute" });
        $("#make_hidden").show();
    } else {
        $(".child").css({ position: "inherit" });
        $("#make_hidden").hide();
    }
});

$("#make_hidden").click(function () {
    count_make_hidden++;
    if (count_make_hidden % 2 == 0) {
        $(".child").css({
            top: "-9999px",
            left: "-9999px"
        });
    } else {
        $(".child").css({
            top: "auto",
            left: "auto"
        });
    }
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js