css - 在 cdk-virtual-scroll-viewport Angular 之外显示绝对元素
问题描述
我有一个cdk-virtual-scroll-viewport
元素,在这个元素内部我有一个相对定位的 div,里面有一个绝对定位的元素。基本上我希望能够在外部显示绝对定位的项目,cdk-virtual-scroll-viewport
但它被切断了......
这是这个问题的堆栈闪电
https://stackblitz.com/edit/angular-kavjsh
组件.html
<div class="container">
<cdk-virtual-scroll-viewport itemSize="70">
<div class="test" *cdkVirtualFor="let name of names">
<p>{{name}}</p>
<div class="test-item"></div>
</div>
</cdk-virtual-scroll-viewport>
</div>
组件.css
p {
font-family: Lato;
}
cdk-virtual-scroll-viewport {
width: 150px;
border: 1px solid black;
height: 600px;
}
.test {
position: relative;
}
.test-item {
position: absolute;
background: black;
width: 150px;
height: 100px;
left: 50%;
}
这是怎么回事
我想要的结果是这样
各种定位配置都试过了还是不行?
任何帮助,将不胜感激!
解决方案
您可以使用以下步骤
- 重置
contain
为“初始”或“布局” - 更改
overflow
为“可见”
cdk-virtual-scroll-viewport {
overflow: visible;
contain: initial;
}
:host() ::ng-deep cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper {
contain: inherit;
}
https://stackblitz.com/edit/angular-miqwyw?file=src/app/app.component.css
推荐阅读
- xamarin.android - 编写一个调用另一个 App 元素的宏
- internationalization - 如何翻译 RestructuredText 中的链接?
- javascript - Solidity:错误:请将数字作为字符串或 BN 对象传递以避免精度错误
- javascript - ReferenceError:频道未使用 discord.js 定义
- javascript - inputType = {“number”},数字拨号盘未在ios中显示但在android中可见 - React js
- r - 查找值是否在其他列的范围内
- java - 使用两个活动配置文件运行 Spring Boot
- spring-boot - 通过 Web 访问 Heroku 上部署的后端服务创建的新图像?
- perl - 搜索键值对并将值附加到 unix 中的其他键
- oracle - 在 Azure 中为 Oracle DB 捕获插入、更新和删除事件