<分区>
大家好,我想将一个 div(封面)覆盖在另一个 div(区域)上,我已经检查过与我的类似的帖子,但没有一个能满足我的特定需求。根据我的测试,它只是出现在主 div(区域)下方。容器 div(reader) 的位置是固定的,这是我能够填满整个屏幕的唯一方法。请在下面检查我的代码。谢谢
<style>
html,
body {
box-sizing: border-box;
min-height: 100%;
margin: 0;
padding: 0;
}
#reader {
position: fixed;
width:100%;
height: 100%;
top: 10;
left: 20;
bottom: 10;
right: 20;
background: wheat;
display: flex;
flex-direction: column;
}
#reader #toolbar {
flex: 0 1 auto;
display: flex;
justify-content: space-between;
background: rgba(0,0,0,0.05);
padding: 10px;
}
#reader #toolbar .left {
flex: 0 1 auto;
}
#reader #toolbar .center {
flex: 0 1 auto;
}
#reader #toolbar .right {
flex: 0 1 auto;
}
.area {
flex: 1 0 auto;
display: flex;
margin: 10px 15px;
padding: 10px;
}
#reader #area div {
position: absolute;
width: 90%;
top: 10px;
left: 5%;
bottom: 10px;
right: 5%;
}
.cover {
z-index: 9;
}
</style>
<div id="reader">
<input type="file" id="bookChooser">
<select id="toc"></select>
<div id="area" class="area"></div>
<div class="area cover"></div> <!-- This should cover the div area above, not pushed down -->
<button id="prev" type="button"><</button>
<button id="next" type="button">></button>
</div>