<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.