EN
CSS - issue with position: fixed element inside position: fixed element
1
answers
6
points
Is it possible to use position: fixed element inside other position: fixed element in the way position: absolute works?
As I noticed, position: fixed style sets element position according to the document - not according to the parent element that has position: fixed also. It causes covering one element by second one messing my layout.
What I want (screenshot):
What I get (sample code):
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
body {
height: 100px;
}
.outer {
position: fixed;
left: 10px; top: 10px; right: 10px; bottom: 10px;
background: red;
}
.inner {
position: fixed;
left: 10px; top: 10px; right: 10px; bottom: 10px;
background: blue;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
</div>
</div>
</body>
</html>
1 answer
5
points
There is only one solution: use position: absolute for the inner element.
Example:
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
body {
height: 100px;
}
.outer {
position: fixed;
left: 10px; top: 10px; right: 10px; bottom: 10px;
background: red;
}
.inner {
position: absolute;
left: 10px; top: 10px; right: 10px; bottom: 10px;
background: blue;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
</div>
</div>
</body>
</html>
0 comments
Add comment