CSS中的绘制顺序，chrome和firefox在使用3d转换时的不同点

100人浏览 2024-11-27 08:33:40

一般规则

浏览器如何确定绘画内容的顺序？猜测可能是浏览器将按照DOM中指定的顺序来绘制内容，就是它在页面的源代码中出现的顺序。

我们可以构造一个简单的示例，显示两个div。我们通过给两个div之一赋予负的margin-top来使他们重叠。

<style>
    .box {
        width: 8ex;
        height: 8ex;
        padding: 0.2ex;
        color: white;
        font-weight: bold;
        text-align: right;
    }

    .blue { background: #99DDFF; }

    /* The second div has a negative top margin so that it overlaps
       with the first (blue) div. Also, shift it over to the right
       slightly. */
    .green {
        background: #44BB99;
        margin-left: 3ex;
        margin-top: -6ex;
     }
</style>

<div class="blue box">1</div>
<div class="green box">2</div>

效果如下图：

使用该 z-index属性，我们可以覆盖浏览器使用的常规绘制顺序。我们给绿色div一个 z-index并使其相对定位。再在绿色div里面添加一个黄色子div，以了解它如何影响子项。

<div class="blue box">0</div>
<div class="green box" style="position: relative; z-index: -1;">-1
    <div class="yellow box" style="position: relative; z-index: 1000;">1000</div>
</div>

效果如下图：

如果给黄色div一个比较大的z-index会发生什么呢?

<div class="blue box">0</div>
<div class="green box" style="position: relative; z-index: -1;">-1
    <div class="yellow box" style="position: relative; z-index: 1000;">1000</div>
</div>

效果如下图：

黄色div没有显示在“最高”层，这是因为绿色div使用了z-index创建了一个stacking context，堆栈上下文中的内容作为一个单元绘制在一起，并且堆栈内容之外的项目将永远不会在它们之间绘制（一般是这样，下面会有一个方法打破这种规则）。

打破规则，chrome和firefox的不同

CSS中充满了奇技淫巧，一个层叠上下文中有没有办法被“插入”别的元素呢? 有！

<style>
    .salmon {
        background: salmon;
        margin-top: -5ex;
        margin-left: 4ex;
    }
</style>

<div class="blue box">0</div>
<div style="position: relative; z-index: -2;">
    <div class="green box">-2</div>
    <div class="salmon box">-2</div>
</div>

效果如下图：

现在，我们对该示例进行两个修改。首先，我们将示例包装在带有
transform-style:preserve-3d的div中，这会将所有子级放置在3d空间中。最后，我们使用3d转换将带有-2 的div之一“推出”屏幕。

<div style="transform-style: preserve-3d;">
    <div class="blue box">0</div>
    <div style="position: relative; z-index: -2;">
        <div class="green box">-2</div>
        <div class="salmon box" style="transform: translateZ(50px);">-2</div>
    </div>
</div>

在chrome浏览器上，效果如下图：