时间戳

首页 > 解决方案 > z-index 的问题

html - z-index 的问题

问题描述

我正在开发一个 web 项目，其中 z-index 存在问题。以下代码只是显示了我的问题。当我将黄色框向右移动时，它会在下一个蓝色框下方。我更改了 z-index 和位置，但它没有用。我该如何解决？代码在这里：

    <!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
</head>

<body>
    <div style="background-color:red; width: 500px; height: 500px; position:absolute; z-index: 9;">

        <div style="background-color:green; width: 400px; height: 400px; position:absolute; z-index: 99;">
            <div style="background-color:blue;width: 100px; height: 100px; display:inline-block; position:relative; z-index: 999;">


            </div>
             <div style="background-color:blue; width: 100px; height: 100px; display:inline-block; position:relative; z-index: 999;">

                <div style=" background-color:yellow; width: 50px; height: 50px;  display:block; position:relative; left: 70px; z-index: 9999999;"></div>
            </div>
             <div style="background-color:blue; width: 100px; height: 100px; display:inline-block; position:relative;z-index: 999;">

            </div>
        </div>
    </div>
</body>

</html>

标签： htmlcsspositionz-index

解决方案

黄色盒子已经在一个蓝色盒子里面，当它向右移动时，它会在下一个蓝色盒子下面，我在包含黄色盒子的蓝色盒子上放了一个 z-index 值。所以它可以在下一个蓝色框上方。

<div style="background-color:red; width: 500px; height: 500px; position:absolute; ">

<div style="background-color:green; width: 400px; height: 400px; position:absolute; ">
    <div style="background-color:blue;width: 100px; height: 100px; display:inline-block; position:relative;">


    </div>
    <div style="background-color:blue; width: 100px; height: 100px; display:inline-block; position:relative;z-index: 10;">

        <div style=" background-color:yellow; width: 50px; height: 50px;  display:block; position:relative; left: 70px;"></div>
    </div>
    <div style="background-color:blue; width: 100px; height: 100px; display:inline-block; position:relative;">

    </div>
</div>

推荐阅读