frontend-challenges
frontend-challenges copied to clipboard
Published
20 hours ago •
jsartisan
jsartisan
340 - Escape the overflow hidden - static
styles.css
.parent {
height: 200px;
width: 200px;
border: 2px solid black;
background-color: yellow;
overflow: hidden;
position: relative;
}
.rocket {
height: 50px;
width: 50px;
font-size: 50px;
position: fixed;
}
.absolute {
position: absolute;
right: 25px;
top: -25px;
}
index.html
<!doctype html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="/styles.css" />
<link rel="stylesheet" href="/demo.css" />
</head>
<body>
<div class="parent">
<div class="absolute">
<div class="rocket">🚀</div>
</div>
</div>
</body>
</html>
When you need an element (like a rocket) to break free from an overflow: hidden container while still maintaining its position relative to a specific parent element, you can use this combination:
- Create an outer wrapper with
position: absolute- this establishes the positioning context - Place your element inside with
position: fixed- this allows it to escapeoverflow: hidden - Important: Don't use
top,left,right, orbottomon the fixed element itself, as this would make it position relative to the viewport instead of its parent
This technique gives you the best of both worlds:
- The fixed positioning lets you break out of
overflow: hidden - The absolute wrapper lets you control where the element is positioned relative to its parent
Think of it as the absolute wrapper determining "where" and the fixed element handling "how" it should break out of constraints.