When it comes to positioning elements in CSS, developers often encounter the challenge of setting the width of a position: fixed or position: sticky element relative to its parent.
This article explores two approaches to address this challenge, drawing inspiration from PhillT’s article on Dev.to and a popular StackOverflow thread.
The Challenge
The primary challenge is that both position: fixed and position: sticky take the element out of the normal document flow, which can complicate maintaining relative widths. Let’s delve into the solutions for both positioning scenarios.
Approach 1: Fixed Position Relative to Parent
When an element is positioned as fixed, it is positioned relative to the viewport. This can make it tricky to maintain its width relative to its parent. However, we can leverage the inherit keyword to achieve the desired result.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed Position Relative to Parent</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="parent">
<div class="fixed-child"><h1 class="title">Fixed Position Relative to Parent</h1></div>
<div class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores in provident nisi accusantium iusto cum.
</div>
</div>
</body>
</html>.parent {
position: relative;
text-align: justify;
padding-bottom: 24px;
width: 800px;
height: 300px;
margin: 100px auto;
background-color: #f1f8e8;
border: 2px solid #d8efd3;
overflow: hidden;
}
.fixed-child {
position: fixed;
width: inherit;
top: 101px;
left: inherit;
background-color: #95d2b3;
border: 1px solid #95d2b3;
height: 50px;
display: flex;
justify-content: flex-start;
align-items: center;
}
.title {
font-weight: bold;
font-size: 22px;
margin-left: 20px;
}
.text {
padding: 20px;
margin-top: 34px;
overflow-y: scroll;
height: 300px;
}Output: Codepen Link
In this example, the .fixed-child class uses position: fixed and width: inherit to ensure it maintains the width of its parent element. The top and left properties position it relative to the viewport.
Approach 2: Sticky Position Relative to Parent
Using position: sticky can be more straightforward as it allows an element to toggle between relative and fixed positioning based on the user’s scroll position. This can also help in maintaining the width relative to the parent.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Position Relative to Parent</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="parent">
<div class="fixed-child"><h1 class="title">Sticky Position Relative to Parent</h1></div>
<div class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores in provident nisi accusantium iusto cum.
</div>
</div>
</body>
</html>.parent {
position: relative;
text-align: justify;
padding-bottom: 24px;
width: 800px;
height: 300px;
margin: 100px auto;
background-color: #f1f8e8;
border: 2px solid #d8efd3;
overflow: hidden;
}
.fixed-child {
position: sticky;
width: inherit;
top: 0px;
left: inherit;
background-color: #95d2b3;
border: 1px solid #95d2b3;
height: 50px;
display: flex;
justify-content: flex-start;
align-items: center;
}
.title {
font-weight: bold;
font-size: 22px;
margin-left: 20px;
}
.text {
padding: 20px;
overflow-y: scroll;
height: 300px;
}Output: Codepen Link
In this example, the .fixed-child class uses position: sticky with top: 0 to ensure it sticks to the top of the parent element when scrolling. This approach ensures the width remains relative to the parent.
Conclusion
Both position: fixed and position: sticky offer unique ways to position elements. By understanding their behaviors and leveraging CSS properties like inherit, you can achieve layouts where fixed or sticky elements maintain widths relative to their parent elements. Experiment with these techniques to find the best fit for your design needs.
Add comment