Css 在容器分区内弹出，扩展容器高度，不显示在顶部
我在一个类似Excel的网格上工作，在正确显示弹出窗口时遇到了问题，因为底部似乎被container div截断了 问题非常类似于，我正在寻找类似的结果，但在包含div中。我可以在没有包含视口的情况下实现我想要的布局 基本布局和样式为：Css 在容器分区内弹出，扩展容器高度，不显示在顶部,css,html,Css,Html,我在一个类似Excel的网格上工作，在正确显示弹出窗口时遇到了问题，因为底部似乎被container div截断了 问题非常类似于，我正在寻找类似的结果，但在包含div中。我可以在没有包含视口的情况下实现我想要的布局 基本布局和样式为： <body> <div class="viewport"> <div class="canvas"> <div class="rows">
<body>
<div class="viewport">
<div class="canvas">
<div class="rows">
<div class="row">
<div class="cell">
<div class="cell__Value">
<div>
<div class="popup">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
.viewport {
height: 150px;
width: 400px;
background-color: blue;
overflow: hidden;
position: absolute;
top: 35px;
}
.canvas {
height: 149px;
width: 399px;
background-color: lightblue;
overflow-y: scroll;
overflow-x: auto;
position: absolute;
}
.rows {
height: 100px;
width: 700px;
background-color: red;
overflow: hidden;
}
.row {
background-color: darkred;
height: 35px;
overflow: hidden;
}
.cell {
background-color: green;
position: absolute;
left: 100px;
width: 100px;
height: 35px;
overflow: visible;
}
.popup {
background-color: lightgreen;
opacity: 0.8;
position: relative;
width: 150px;
height: 200px;
}
.视口{
高度：150像素；
宽度：400px；
背景颜色：蓝色；
溢出：隐藏；
位置：绝对位置；
顶部：35px；
}
.帆布{
高度：149px；
宽度：399px；
背景颜色：浅蓝色；
溢出y：滚动；
溢出-x：自动；
位置：绝对位置；
}
.行{
高度：100px；
宽度：700px；
背景色：红色；
溢出：隐藏；
}
.行{
背景色：暗色；
高度：35px；
溢出：隐藏；
}
.细胞{
背景颜色：绿色；
位置：绝对位置；
左：100px；
宽度：100px；
高度：35px；
溢出：可见；
}
.弹出窗口{
背景颜色：浅绿色；
不透明度：0.8；
位置：相对位置；
宽度：150px；
高度：200px；
}
如何根据需要显示弹出窗口？如果我了解您的问题，修复应该很容易 只需将位置设置为“固定”，那么它将位于所有其他位置之上。 这是弹出窗口的一种非常常见的方法
.popup {
background-color: lightgreen;
opacity: 0.8;
position: fixed;
width: 150px;
height: 200px;}
height.cell\u Value