时间戳

首页 > 解决方案 > 即使隐藏溢出，图像如何溢出

javascript - 即使隐藏溢出，图像如何溢出

问题描述

图像溢出

这是网络：https ://gsemyong.github.io/faq-accordion-card/

.card__illustration {
  background-image: url("./images/bg-pattern-desktop.svg");
  background-repeat: no-repeat;
  background-position: bottom -12rem left -48rem;
  overflow: hidden;
  width: 50%;
}

.illustration__box {
  z-index: 1;
  position: absolute;
  top: 20rem;
  left: -7.8rem;
  animation: box-float 3s ease-in-out infinite;
}

网站信誉：gsemyong

我正在尝试学习网络的代码，但我不明白即使 div 有一个溢出，盒子也能在 div 之外：隐藏值

标签： javascripthtmlcss

解决方案

Box 图像没有溢出，它的position属性设置为absolute，这意味着它在布局流程之外，如果您查看MDN 上的文档，它会说：

Position: Absolute
该元素从正常的文档流中移除，并且在页面布局中不为该元素创建空间。它相对于其最近的定位祖先（如果有）进行定位；否则，它相对于初始包含块放置。它的最终位置由顶部、右侧、底部和左侧的值确定。
当 z-index 的值不是 auto 时，此值会创建一个新的堆叠上下文。绝对定位框的边距不会与其他边距一起折叠。

盒子相对于div.card元素定位，元素有一个position: relative值。它在卡片的边界之外，因为它的属性设置为负值，但是，由于它在正常的文档流之外，它可能在页面上的任何地方。left

您可以看到img.illustration__woman-online--desktop受 影响，overflow: hidden并且图像在左侧被裁剪，因为它使用相对定位：

元素按照文档的正常流程定位，然后根据top、right、bottom和left的值相对于自身进行偏移。偏移量不影响任何其他元素的位置；因此，页面布局中为元素指定的空间与位置是静态的相同。
当 z-index 的值不是 auto 时，此值会创建一个新的堆叠上下文。它对 table-*-group、table-row、table-column、table-cell 和 table-caption 元素的影响是未定义的。

推荐阅读