gpt4 book ai didi

html - 如何用另一个div覆盖一个div作为覆盖

转载 作者:行者123 更新时间:2023-12-05 01:30:23 29 4
gpt4 key购买 nike

<分区>

大家好,我想将一个 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>

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com