重叠HTML标记

我想要三个数字（或单词或任何东西），前两个用红色框包围，后两个用绿色框包围。因此，框将重叠。这在html/css中可能吗？我在片段中有一个半合法的尝试，希望能够理解我想要的东西，尽管它当然不起作用。如果可能的话，我希望避免绝对定位或诸如此类的事情，因为我真的想使用这些元素来标记文本，并计划稍后再阅读该标记

.red{
边框样式：实心；
边框颜色：红色；
填充：4px；
}
格林先生{
边框样式：实心；
边框颜色：绿色；
}

123


1 2 3


1 2 3


这是可能的，但不是很好的编码风格。如果更改文本，还必须更改
.green
的填充和边距


.red{
边框样式：实心；
边框颜色：红色；
填充：4px；
宽度：16px；
}
格林先生{
边框样式：实心；
边框颜色：绿色；
填充：2px4px24px；
左边距：-20px；
}
123
这是我能得到的最接近的结果：


html，正文{
身高：100%；
宽度：100%；
溢出：隐藏；
}
身体{
填充：10px；
}
身体：悬停{
背景：蓝色；
过渡：所有0.2秒缓解；
}
.一{
边框颜色：红色；
边框样式：实心；
左边框宽度：2px；
边框顶部宽度：2px；
边框底宽：2px；
右边框宽度：0；
背景：#FFF；
}
.二{
背景：#FFF；
边框顶部：2件纯红；
底部边框：2倍纯红；
右边框：2倍纯红；
外形：2倍纯绿；
z指数：2；
}
.三{
背景：#FFF；
边框颜色：绿色；
边框样式：实心；
边框左宽度：0；
边框顶部宽度：2px；
边框底宽：2px；
右边框宽度：2px；
填充：2px；
左边距：2倍；
z指数：10000；
外形：2px#FFF实心；
}
123
这里有一个纯CSS解决方案：


span{
字体：1em单字；
字母间距：0.3em；
高度：1米；
垂直对齐：中间对齐；
}
跨度：之前{
内容：“；
宽度：1.5em；
填充：0.5em；
高度：1米；
位置：绝对位置；
边缘顶部：-0.4em；
左边距：-0.5em；
边框：4倍纯红；
}
跨度：之后{
内容：“；
宽度：2米；
高度：1.2米；
左边距：-2.5em；
位置：绝对位置；
边框：4倍纯绿；
}
1 2 3
Exmaple保证金xxxx的负值


.red{
边框样式：实心；
边框颜色：红色；
填充：4px；
宽度：30px；
显示：内联块；
}
格林先生{
边框样式：实心；
边框颜色：绿色；
左边距：-20px；
宽度：15px；
z指数：-1；
显示：内联块；
}

1 2
3.
您想故意破坏XHTML中的XML格式。浏览器是否正确解释了图元上的边框？这在当时很常见，比如
，这里有一个CSS解决方案，它与不同大小的水平和垂直内容保持在一起，并且不使用定位。它使用CSS边框和框阴影来创建多个边框。然后CSS显示：在div上使用表格单元格

使用CSS表格样式在div之间创建关系有几个好处。如果div包含不同数量的内容，则每个div的垂直高度将匹配，并且可以调整总体大小（流体%、或固定像素）

JSFiddle：


.table{
显示：表格；
宽度：80%；
}
.表格行{
显示：表格行：
}
div{
显示：表格单元格；
保证金：0；
}
.对{
边框顶部：2件纯红；
右边框：0px实心红色；
底部边框：2倍纯红；
左边框：2倍纯红；
填充：4px；
盒影：0px 0px 0px 2px红色；
}
.中心{
填充：4px；
边框顶部：2件纯绿；
右边框：0px纯绿色；
底部边框：2倍纯绿；
左边框：2倍纯绿；
盒影：2px 0px 0px 2px红色；
}
.左{
边框顶部：2件纯绿；
右边框：2倍纯绿；
底部边框：2倍纯绿；
左边框：0px纯绿色；
填充：7px；
}

这是一行文字
第1段-佩伦茨克居民莫尔比·特里斯蒂克

第2款-设备直径。放置相位，前生命，前生命，前生命，前生命，前生命，前生命，前生命，前生命

即使有了您提供的示例，我也不太明白您的意图。你能在画作中画出你想要的东西并给我们看一张图片吗？我想他希望数字2成为两个“集合”中的“共享”元素。并直观地显示交叉点。如果您将问题表述为“如何重叠显示边界的div”……可能会产生不同的答案方法。@slime我明白您的意思，但我真正想做的是让标记指示重叠，就像我所包含的（非工作）示例片段中一样。我认为这在html中是不可能的，但我希望有人能给我一个体面的方式。我认为，重叠的div并不能捕捉到我想要的内容。一旦使用了不同的字体或内容（例如单个字母而不是数字），就会出现这种情况。这是真的，我在几秒钟前在我的帖子中添加了这样的内容：）是的，不是我想要的，但它确实获得了正确的视觉表现。稍后我会给你一个投票，但我希望有人能拿出一个真正的解决方案。我认为没有真正的解决方案；）我仍在努力，但它没有发挥应有的作用