为什么元素在使用不透明度时可见：1 但不在 window 范围内？

Question

我有一套 div 的。全部都是window，正如我给的negative value of left.

我的问题是当我将任何 div 的不透明度更改为 1 时。它在 window 上可见，为什么？ .或者换句话说，为什么它在 left:0 位置可见，因为它出现在 window 之外？

示例代码

<div class="crystal-slider__slide" data-crystal-slide="2" style="width: 25%; transition: opacity 500ms ease-out 0s; left: -25%; opacity: 1; z-index: 97;">
        2

      </div>

这里是上面的div我给的是left:-25%这是在window之外的。但是当我给不透明度一个时，它会进入寡妇或显示竞争为什么？

这是我的代码

https://codepen.io/naveennsit/pen/RwVEgrJ

Answer 1

该元素不在 window 之外，因为它的位置：相对设置为：

.crystal-slider__slide {
  ...
  position: relative;
}

这意味着它的最终位置紧接在前面的元素之后（因此 2 将显示在紧跟在 1 之后的行上）但是您随后设置 left: -25% 以便它回到行上以覆盖其先前的兄弟。

如果删除那个位置：相对；那么内容为 2 的元素确实返回了父元素宽度的 25%。

在这些情况下，通过使用浏览器开发工具中的检查工具准确查看元素的位置并查看计算值以及准确设置样式的人员可能很有用。

为什么元素在使用不透明度时可见：1 但不在 window 范围内？

why element is visible while using opacity : 1 but it is out of window?

html

css

opacity