<div class="coordinates"></div>
<main>
  <div class="box fixed"></div>
  <div class="box absolute"></div>
  <div class="box float"></div>
</main>

<div class="control">
  <input type="checkbox" id="contain">
  <label for="contain">contain: layout</label>
</div>
@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5vh;
  font-family: "Exo", Arial, sans-serif;
  font-size: 20px;
  font-weight: 600;
}

.coordinates {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background: linear-gradient(to bottom, #673ab78f, #673ab78f) no-repeat center,
    linear-gradient(to bottom, #673ab78f, #673ab78f) no-repeat center;
  background-size: 100% 10px, 10px 100%;
}

main {
  border: 4px dashed #f36;
  padding: 5px;
  width: 60vw;
  height: 60vh;
  background-color: #fff;
}

.fixed {
  position: fixed;
  top: 100px;
  left: 10px;
  background-color: #09f;
  color: #fff;
  padding: 10px;
  border-radius: 4px;
}

.fixed::before {
  content: "Fixed Element";
}

.absolute {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: #990;
  color: #fff;
  border-radius: 4px;
  padding: 10px;
}

.absolute::before {
  content: "Absolute Element";
}

.float {
  background-color: #def;
  color: #333;
  border-radius: 4px;
  padding: 10px;
}

.float::before {
  content: "Float Element";
  float: left;
}

.float::after {
  content: "Float Element";
  float: right;
}

.layout {
  contain: layout;
}

.control {
  padding-top: 10vh;
  position: relative;
  z-index: 9999;
}

.layout .float {
  contain: layout;
}
const mainEle = document.querySelector("main");
const checkboxEle = document.querySelector("#contain");

checkboxEle.addEventListener("change", (etv) => {
  mainEle.classList.toggle("layout", etv.target.checked);
});
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.