CSS 绝对位置，而不是相对于其绝对父 div答案

【问题标题】：CSS absolute position and not relative to its absolute parent divCSS 绝对位置，而不是相对于其绝对父 div
【发布时间】：2019-10-08 17:32:07
【问题描述】：

有一个父 div 具有绝对定位，而子 div 具有绝对定位。我的问题是使子 div 相对于整个页面而不是其父：

例子：

.parent { 
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100px;
  height: 100px;
  background-color: blue;
  overflow: hidden;
  animation: move 2s infinite;
}
.child { 
  position: fixed;
  top: 5px;
  left: 5px;
  width: 50px;
  height: 50px;
  background-color: purple;
  z-index: 2;
}

@keyframes move {
50% {
transform: translateX(25px);
}
}

<div class="parent">
<div class="child"></div>
</div>

目标是让紫色的小div固定在屏幕的左上角，当蓝色的大div移到外面时隐藏起来。我尝试了sticky - fixed，结果相同。

【问题讨论】：

那么元素应该是兄弟元素。您需要将“孩子”放置在 DOM 中的其他位置以使其正常工作
这样，我无法使用overflow: hidden 并且不会隐藏div
可能重复：stackoverflow.com/questions/15152712/…
看起来与Transform的使用有关
@GarrGodfrey stackoverflow.com/q/15194313/8620333

标签： html css

【解决方案1】：

您可以为子元素使用相反方向的动画，这将使子元素在一个位置看起来像它的静态。

.parent {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100px;
  height: 100px;
  background-color: blue;
  overflow: hidden;
  animation: move 2s infinite;
}

.child {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 50px;
  height: 50px;
  background-color: purple;
  animation: moveBack 2s infinite;
  z-index: 2;
}

@keyframes move {
  50% {
    transform: translateX(25px);
  }
}

@keyframes moveBack {
  50% {
    transform: translateX(-25px);
  }
}

<div class="parent">
  <div class="child"></div>
</div>

【讨论】：

是的，这应该标记为已解决，但不幸的是，由于我的 div 应用了多个过渡效果，这在我的项目中不起作用，我会尝试解决这个问题

【解决方案2】：

绝对定位的行为类似于子 div 的相对定位。

您必须将子 div 移到父 div 之外，以使其相对于页面/正文固定。

否则child 将始终相对于parent 定位

【讨论】：

这样，我无法使用overflow: hidden 并且不会隐藏div
你对overflow: hidden的意图是什么？
当蓝色 div 移出紫色子元素时隐藏它

【解决方案3】：

你可以考虑使用clip-path动画的想法

.parent { 
  position: absolute;
  top: 10px;
  left: 10px;
  width: 125px;
  height: 100px;
  background-color: blue;
  overflow: hidden;
  animation: move 2s infinite;
  clip-path:polygon(0 0, calc(100% - 25px) 0,calc(100% - 25px) 100%, 0 100%);
}
.child { 
  position: absolute;
  top: 5px;
  left: 5px;
  width: 50px;
  height: 50px;
  background-color: purple;
}

@keyframes move {
50% {
  clip-path:polygon(25px 0, 100% 0,100% 100%, 25px 100%);
}
}

<div class="parent">
<div class="child"></div>
</div>

【讨论】：

也是有效的答案，但我通过将我的 div 设置为矩形使示例变得简单，但它的方式更复杂，无法在剪辑路径中绘制。
@KareemDabbeet 分享你的真实而复杂的例子。实际上，我们只能根据您提供的代码提供帮助。没有人可以为您提供适合您的准确解决方案，因为没有人知道真正的用例

【解决方案4】：

您可以使用此代码

body {
            margin: 0;
            padding: 0;
        }
        .parent { 
            position: absolute;
            top: 10px;
            left: 10px;
            width: 200px;
            height: 200px;
            background-color: blue;
            overflow: hidden;
            animation: move 2s infinite;
        }
        .child { 
            position: fixed;
            top: 0px;
            left: 0px;
            width: 100px;
            height: 100px;
            background-color: purple;
            z-index: 2;
        }
        @keyframes move {
            50% {
                transform: translateX(25px);
            }
        }

    <div class="parent">
        <div class="child"></div>
    </div>

【讨论】：

【解决方案5】：

您孩子的立场必须是绝对的。绝对定位与页面本身有关。

【讨论】：

孩子已经绝对定位。问题是父级也是绝对定位的，这导致子级的绝对位置锚定到父级而不是页面。
是的，这是真的。但你必须明白我说的是页面上的第一个脚本。