Html 使css重叠，z索引不工作，在随机位置渲染_Html_Css

Html 使css重叠，z索引不工作，在随机位置渲染

html css

Html 使css重叠，z索引不工作，在随机位置渲染,html,css,Html,Css,我正在尝试创建一个如下图标：这是我的密码： <head> <style type="text/css"> .dot { height: 500px; width: 500px; border-radius: 50%; display: inline-block; border: 10px solid red;

我正在尝试创建一个如下图标：

这是我的密码：

<head>
    <style type="text/css">
        .dot {
          height: 500px;
          width: 500px;
          border-radius: 50%;
          display: inline-block;
          border: 10px solid red;
        }
        .square {
          height: 353.55px;
          width: 353.55px;
          background-color: #6a6;
          display: inline-block;
        }
        .triangle {
          width: 0;
          height: 0;
          border-left: 50px solid transparent;
          border-right: 50px solid transparent;
          border-bottom: 100px solid blue;
        }
    </style>
</head>

<body>
    <div class="dot"></div>
    <div class="square"></div>
    <div class="triangle"></div>
</body>


多特先生{
高度：500px；
宽度：500px；
边界半径：50%；
显示：内联块；
边框：10px纯红；
}
.广场{
高度：353.55px；
宽度：353.55px；
背景色：#6a6；
显示：内联块；
}
.三角形{
宽度：0；
身高：0；
左边框：50px实心透明；
右边框：50px实心透明；
边框底部：100px纯蓝色；
}

但我得到的是：

如何使它们重叠？ 尝试z索引：1、2和3，不起作用也许这并不完全是你想要的，但它可能会有所帮助


.包装纸{
位置：相对位置；
高度：500px；
宽度：500px；
变换：比例（0.25）
}
多特先生{
高度：500px；
宽度：500px；
边界半径：50%；
显示：内联块；
边框：10px纯红；
位置：绝对位置；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
}
.广场{
高度：353.55px；
宽度：353.55px；
背景色：#6a6；
显示：内联块；
位置：绝对位置；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
}
.三角形{
宽度：0；
身高：0；
左边框：51px实心透明；
右边框：51px实心透明；
边框底部：85px纯蓝色；
位置：绝对位置；
左：50%；
最高：16%；
变换原点：中心；
转换：translateX（-50%）量表（9）；
}

试试这个：也许这并不完全是你想要的，但它可能会有所帮助


.包装纸{
位置：相对位置；
高度：500px；
宽度：500px；
变换：比例（0.25）
}
多特先生{
高度：500px；
宽度：500px；
边界半径：50%；
显示：内联块；
边框：10px纯红；
位置：绝对位置；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
}
.广场{
高度：353.55px；
宽度：353.55px；
背景色：#6a6；
显示：内联块；
位置：绝对位置；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
}
.三角形{
宽度：0；
身高：0；
左边框：51px实心透明；
右边框：51px实心透明；
边框底部：85px纯蓝色；
位置：绝对位置；
左：50%；
最高：16%；
变换原点：中心；
转换：translateX（-50%）量表（9）；
}

我相信您正在寻找这样的产品：

.dot{
位置：绝对位置；
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：332px；
宽度：332px；
边界半径：50%；
边框：10px纯红；
顶部：148px；
左：190px；
}
.广场{
高度：235px；
宽度：235px；
背景色：#6a6；
位置：相对位置；
}
.广场：之后{
内容：''；
位置：绝对位置；
顶部：8px；
左：8px；
宽度：0；
边框顶部：实心110px白色；
边框底部：实心110px白色；
右边框：固态110px白色；
左边框：实心110px白色；
}
.三角形{
位置：绝对位置；
身高：0；
宽度：0；
显示器：flex；
证明内容：中心；
对齐项目：居中；
左边框：358px实心透明；
右边框：358px实心透明；
边框底部：500px纯蓝色；
z指数：-1；
}
.三角形：：之后{
内容：''；
位置：绝对位置；
顶部：12px；
左：-340px；
宽度：0；
边框底部：实心480px白色；
右边框：实心340px透明；
左边框：实心340px透明；
}

我相信您正在寻找这样的产品：

.dot{
位置：绝对位置；
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：332px；
宽度：332px；
边界半径：50%；
边框：10px纯红；
顶部：148px；
左：190px；
}
.广场{
高度：235px；
宽度：235px；
背景色：#6a6；
位置：相对位置；
}
.广场：之后{
内容：''；
位置：绝对位置；
顶部：8px；
左：8px；
宽度：0；
边框顶部：实心110px白色；
边框底部：实心110px白色；
右边框：固态110px白色；
左边框：实心110px白色；
}
.三角形{
位置：绝对位置；
身高：0；
宽度：0；
显示器：flex；
证明内容：中心；
对齐项目：居中；
左边框：358px实心透明；
右边框：358px实心透明；
边框底部：500px纯蓝色；
z指数：-1；
}
.三角形：：之后{
内容：''；
位置：绝对位置；
顶部：12px；
左：-340px；
宽度：0；
边框底部：实心480px白色；
右边框：实心340px透明；
左边框：实心340px透明；
}

使用绝对定位并重新排列div。以下是我所做的，尺寸是错误的，但它们是重叠的：

<head>
    <style type="text/css">
        .dot {
          height: 500px;
          width: 500px;
          border-radius: 50%;
          display: inline-block;
          border: 10px solid red;
          position:absolute;
          top: 140px;
          left: 130px;
        }
        .square {
          height: 353.55px;
          width: 353.55px;
          background-color: #6a6;
          display: inline-block;
          position:absolute;
          top: 224px;
          left: 214px;
        }
        .triangle {
          width: 0;
          height: 0;
          border-left: 400px solid transparent;
          border-right: 400px solid transparent;
          border-bottom: 800px solid blue;
          position:absolute;
          top:0;
          left:0;
        }
    </style>
</head>

<body>
    <div class="triangle"></div>
    <div class="dot"></div>
    <div class="square"></div>
</body>


多特先生{
高度：500px；
宽度：500px；
边界半径：50%；
显示：内联块；
边框：10px纯红；
位置：绝对位置；
顶部：140px；
左：130像素；
}
.广场{
高度：353.55px；
宽度：353.55px；
背景色：#6a6；