html - 如何摆脱列表中的溢出切割div?
问题描述
我们正在使用列表来列出网站上的项目(等)并且正在使用溢出。同样,我们有 div - 当鼠标悬停在网站的项目上时,将显示 div。有些项目非常靠近滚动条,它们的 div 像这样切割:
关于我们如何让 div 在滚动条上继续而不是在滚动条上截断的任何帮助都会很棒。
ul.purchase-list {
display: inline-block;
margin: 0;
padding: 0;
}
ul.purchase-list li {
float: left;
border: 2px solid #b200ff;
border-radius: 5px;
margin-right: 8px;
position: relative;
height: 170px;
width: 170px;
padding: 10px;
margin-bottom: 8px;
}
.purchase-hover {
display: none;
position: absolute;
width: 300px;
background: #392067;
border-radius: 5px;
overflow: hidden;
z-index: 999 !important;
left: 50%;
transform: translateX(-50%);
}
.purchase-hover:hover {
display: none !important;
z-index: 999 !important;
}
ul.purchase-list li:last-child {
margin-right: 0;
}
.purchase img {
height: 150px;
width: 150px;
text-align: center;
}
.purchase span {
position: absolute;
left: -14px;
top: -17px;
background: #b200ff;
font-size: 11px;
border-radius: 50%;
padding: 10px 5px;
font-weight: 700;
color: #fff;
}
<li class="item">
<div class="purchase">
<img src="-" style="position: absolute; z-index: -1">
<img src="-">
</div>
<div class="purchase-hover">
<div class="purchase-hover-top">
<h2>Test</h2>
</div>
<div class="purchase-hover-content">
<h3>Test</h3>
<h5>Test
</h5>
</div>
</div>
</li>
解决方案
好吧,Z-Index 必须处理出现的图层,所以我会弄乱 div 的 Z-Index 和 body 的 Z-Index,并尝试确保 div Z 大于 body Z。
推荐阅读
- r - undo str_split 组合单词是一个段落?(右)
- algorithm - 关于量子算法:矩阵乘积算法
- google-api - 未找到 ACL 发布 Google 日历域
- node.js - Firebase 身份验证访问令牌失败,使用身份验证自定义令牌创建令牌
- docker - standard_init_linux.go:211:exec 用户进程在 linux 上运行 Docker 时导致“没有这样的文件或目录”,即使使用 find 命令也是如此
- vb.net - 如何在 Vb.net 中使用函数返回多个值
- security - 利用打开的 UPnP 端口
- c# - 导出 gridview 数据时的随机 HTML
- python - 如何在 Tkinter 中清除坐标?
- reactjs - React 路由器配置中 HoC 的 Typescript 类型