小编Bla*_*ick的帖子

我正在使用以下代码：

<div>
    <div>
        <div>
            <div>
                <div>
                    <div>
                        ...
                            <div class="absolute">Lorem ispum</div>
                        ...
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

.absolute {
  position: absolute;
}

使用 Chrome 的 DevTools，我希望能够快速找到哪个父<div>元素具有position: relative，因此我可以知道哪个父元素正在确定我的绝对定位元素的原点。我可以手动检查每个 div 以找到设置为的第一个父级，relative但我正在使用深度嵌套的树，所以我想知道是否有更快的方法来找到我要查找的父级。控制台的 Javascript 片段将是合适解决方案的示例。

我知道 z-index 仅适用于定位元素，但我想知道为什么会出现这种情况。这种行为是否有充分的理由，或者它只是那些半任意的规范决策之一？

我在使用这样的代码时遇到了这个问题：

超文本标记语言

<div>
    <img class="not-positioned" src="http://placekitten.com/g/200/300">
    <img class="positioned" src ="http://placekitten.com/g/400/500">
</div>

CSS

<div>
    <img class="not-positioned" src="http://placekitten.com/g/200/300">
    <img class="positioned" src ="http://placekitten.com/g/400/500">
</div>

http://jsfiddle.net/666nzL6j/

您会注意到，这是根据规范工作的（尽管z-index 值较高，但.not-positioned图像位于图像后面），但我很难理解这种行为的基本原理。.positioned.not-positioned

通常，当我在 Photoshop 中为 Web 保存带有透明区域的 PNG-24 文件时，当我取消选择透明度选项时，文件大小会变大。

在我刚刚处理的文件中，透明的文件大小为 45.28k，但不透明的文件大小为 53.71k，这不是一个微不足道的差异。

谁能解释这种行为？