<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<style>
body, html {
    width: 100%;
    height: 100%;
    font-size: 16px;
    -webkit-text-size-adjust: none;
}

.container {
    color: white;
    text-align: center;
    opacity: 0.75;
}

.fixed {
    width: 300px;
    height: 300px;
    position: fixed;
    top: 1em;
    left: 1vw;
    background: tomato;
    pointer-events: none;
    z-index: 100;
}

#absolute {
    width: 50%;
    height: 100%;
    position: absolute;
    bottom: 0;
    right: 50%;
    background: blueviolet;
}

iframe {
    width: 200px;
    height: 200px;
    border: 1px solid black;
}

main {
    line-height: 200%;
}
</style>
</head>
<body>
    <div class="fixed container">
        <iframe title="Outer Subframe"></iframe>
    </div>
    <div id="absolute" class="container">
        <p>Here’s to the crazy ones. <strong>The misfits.</strong> The rebels. The troublemakers.
    </div>
    <main>
        <section><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Libero id faucibus nisl tincidunt eget nullam non nisi est. A cras semper auctor neque vitae tempus quam pellentesque nec. Amet risus nullam eget felis eget nunc lobortis mattis aliquam. Sagittis purus sit amet volutpat consequat mauris nunc congue. Dictum fusce ut placerat orci nulla pellentesque dignissim enim. Laoreet non curabitur gravida arcu ac. Lorem ipsum dolor sit amet. Ultrices in iaculis nunc sed augue lacus viverra. Eu feugiat pretium nibh ipsum consequat nisl vel. Neque ornare aenean euismod elementum nisi quis eleifend quam adipiscing. Semper quis lectus nulla at volutpat diam ut. Bibendum ut tristique et egestas quis ipsum suspendisse ultrices. Rhoncus dolor purus non enim praesent elementum facilisis leo. Ultrices vitae auctor eu augue ut lectus arcu bibendum at.</p></section>
        <section><p>Sem viverra aliquet eget sit amet tellus cras adipiscing. Sit amet cursus sit amet dictum sit amet justo donec. Viverra nibh cras pulvinar mattis nunc sed blandit libero volutpat. Porttitor eget dolor morbi non arcu risus quis. Diam vulputate ut pharetra sit amet aliquam id diam maecenas. Et pharetra pharetra massa massa ultricies mi quis hendrerit. Amet consectetur adipiscing elit ut aliquam purus sit. Erat pellentesque adipiscing commodo elit at imperdiet. Consectetur adipiscing elit pellentesque habitant morbi tristique senectus et netus. Cras ornare arcu dui vivamus arcu felis bibendum. Blandit aliquam etiam erat velit scelerisque in. Tellus integer feugiat scelerisque varius morbi enim. Maecenas accumsan lacus vel facilisis volutpat est velit egestas dui. Egestas erat imperdiet sed euismod nisi porta lorem mollis aliquam. Volutpat commodo sed egestas egestas fringilla phasellus faucibus. Congue nisi vitae suscipit tellus mauris a. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget. Nibh venenatis cras sed felis eget.</p></section>
        <section><p>Nibh venenatis cras sed felis. Nunc congue nisi vitae suscipit tellus mauris a diam maecenas. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque. Fermentum iaculis eu non diam. Molestie nunc non blandit massa enim nec dui nunc mattis. Arcu cursus euismod quis viverra nibh. Morbi non arcu risus quis varius quam. Sed velit dignissim sodales ut eu sem. Massa id neque aliquam vestibulum morbi blandit. Sit amet venenatis urna cursus eget nunc scelerisque. Non enim praesent elementum facilisis leo vel fringilla. Orci a scelerisque purus semper eget duis at. Donec massa sapien faucibus et molestie. Enim ut sem viverra aliquet eget. Elementum curabitur vitae nunc sed velit dignissim sodales ut. In massa tempor nec feugiat nisl pretium fusce id. Habitant morbi tristique senectus et netus et malesuada fames ac. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque in. Nulla pellentesque dignissim enim sit amet venenatis. Et malesuada fames ac turpis egestas integer eget.</p></section>
        <section><p>Sollicitudin aliquam ultrices sagittis orci a. Mattis pellentesque id nibh tortor id aliquet lectus proin nibh. Duis at consectetur lorem donec massa sapien faucibus. Massa tincidunt dui ut ornare lectus sit amet est placerat. In ante metus dictum at. Urna nec tincidunt praesent semper feugiat nibh sed. Tempus quam pellentesque nec nam. Sapien pellentesque habitant morbi tristique senectus et netus et malesuada. Orci sagittis eu volutpat odio facilisis. Morbi tristique senectus et netus et malesuada. Phasellus vestibulum lorem sed risus ultricies tristique nulla aliquet. Sem nulla pharetra diam sit. Rhoncus urna neque viverra justo nec. Ultrices vitae auctor eu augue ut lectus arcu bibendum at.</p></section>
        <section><p>Turpis egestas integer eget aliquet nibh praesent tristique. Diam volutpat commodo sed egestas egestas fringilla phasellus faucibus. Enim diam vulputate ut pharetra sit amet aliquam. Congue nisi vitae suscipit tellus mauris a diam. Placerat vestibulum lectus mauris ultrices eros in cursus turpis. Consequat mauris nunc congue nisi vitae suscipit. Est ullamcorper eget nulla facilisi etiam. Nisl nisi scelerisque eu ultrices. Ut tortor pretium viverra suspendisse potenti nullam ac. Sagittis eu volutpat odio facilisis mauris sit amet massa vitae. Aliquet nec ullamcorper sit amet risus. Pretium vulputate sapien nec sagittis. Vel facilisis volutpat est velit egestas dui. Id semper risus in hendrerit gravida rutrum quisque non tellus. Mauris ultrices eros in cursus turpis. Amet consectetur adipiscing elit ut aliquam.</p></section>
    </main>
    <script>
        subframeLoaded = false;
        addEventListener("message", event => {
            if (event.data !== "subframeLoaded")
                return;
            subframeLoaded = true;
        });

        addEventListener("load", () => {
            const subframe = document.querySelector("iframe");
            subframe.src = "nested-frames.html";
        });
    </script>
</body>
</html>