时间戳

首页 > 解决方案 > 重叠绝对定位的兄弟 div 而不在相对 div 上指定背景颜色

css - 重叠绝对定位的兄弟 div 而不在相对 div 上指定背景颜色

问题描述

尝试创建滑动到操作列表组件。

<div class="list-container">
    <div class="row">
        <div class="content">
            Some Content 1
        </div>
        <div class="action">
            Delete Action
        </div>
    </div>
    <div class="row">
        <div class="content">
            Some Content 2...
        </div>
        <div class="action">
            Delete Action
        </div>
    </div>
</div>

Action div绝对定位，z-index 小于content div。

这里的目标是让content div与绝对定位的action div 重叠，而不提供background-colorto content div。如果用户滑动列表，内容 div 会沿 X 方向平移，以显示其下方的操作。

链接到示例https://stackblitz.com/edit/angular-xdgct9

请注意，第二行的内容不使用任何背景颜色，因此动作是可见的。

还有其他方法可以实现这一目标吗？

标签： cssangulardomcss-position

解决方案

编辑了你的stackblitz。以便最初将操作类设置为显示：无。动画完成后，css属性显示设置为block

anim() {
  requestAnimationFrame(() => {
    this.value -= 1;
    if (this.value > -50) {
      this.anim();
      (document.querySelector('.action') as HTMLElement).style.display = 'block'
  }
});

在你的 CSS 中

.action{
  ...
  display:none;
}

推荐阅读