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):
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
body {7
height: 100px;8
}9
10
.outer {11
position: fixed;12
left: 10px; top: 10px; right: 10px; bottom: 10px;13
background: red;14
}15
16
.inner {17
position: fixed;18
left: 10px; top: 10px; right: 10px; bottom: 10px;19
background: blue;20
}21
22
</style>23
</head>24
<body>25
<div class="outer">26
<div class="inner">27
</div>28
</div>29
</body>30
</html>
1 answer
5 points
There is only one solution: use position: absolute for the inner element.
Example:
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
body {7
height: 100px;8
}9
10
.outer {11
position: fixed;12
left: 10px; top: 10px; right: 10px; bottom: 10px;13
background: red;14
}15
16
.inner {17
position: absolute;18
left: 10px; top: 10px; right: 10px; bottom: 10px;19
background: blue;20
}21
22
</style>23
</head>24
<body>25
<div class="outer">26
<div class="inner">27
</div>28
</div>29
</body>30
</html>
0 commentsShow commentsAdd comment
