I have two fixed containers, #meta
and #meta-container
, where #meta
shall always be on the foreground, as it is a global control-element.
My code looks like this
#meta-container { position: fixed; z-index: 1; left: 0; right:0; bottom:0; top: 0; background-color: red; color: rgba(0, 0, 0, 0.87); } #meta { position: fixed; z-index: 2; top: 40%; width: 60px; height: 25px; display: flex; background-color: black; }
<div> <span id="meta"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </span> #meta </div> <div id="meta-container" class="slidein"> #meta-container </div>
But span#meta
is not displayed on top of div#meta-container
. I did not re-assign z-index
somewhere. I also changed the z-index
values for testing but it did not help. What am I doing wrong?
So long - happy coding.
(1) Edit: Corrected spelling in code snippet. Snippet now working (unfortunately not my code).
All you need to do is adding top
and left
styles to overlay them:
#meta-container { position: fixed; top: 0; left: 0; z-index: 1; } #meta { position: fixed; top: 0; left: 0; z-index: 2; }
<div> <span id="meta"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </span> bbbbbbbbbbbbbbbbbbbbbbbbbbbbb </div> <div id="meta-container" class="slidein"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div>
#meta-container {
position: relative;
width:100%;
height:100%;
. . .
}
#meta {
position: fixed;
. . .
}
--
<div id="meta">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<div id="meta-container" class="slidein">
...
</div>
</div>
#meta{ border: 1px solid; width: 25%; position: absolute; z-index: 1; } #meta-container{ border: 1px solid; width: 25%; color: red; position: relative; }
<div id="meta"> <span> meta box </span> </div> <div id="meta-container" class="slidein"> meta container box </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.