css - 为什么我的 div 不会重叠？

Question

我试图让这些 div 重叠并使文本位于三角形内，但文本只能在三角形外移动。

JSFiddle

这是 HTML+CSS：

<div class="tri">
    <div class="test">
        This is test
    </div>

.tri {
    width: 0;
    height: 0;
    border-top: 100px solid black;
    border-left: 100px solid transparent;
    position:relative;
}

.test {
    display:inline-block;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    zoom:1;
    margin-top:-80px;
    margin-left:-80px;
    color:red;
}

Answer 1

您可以简单地position: relative;用于容器元素而不是position: absolute;用于子元素，这样，您的绝对定位元素不会在野外流出，并且将相对于父元素，它也会以这种方式重叠

演示

---

它也是一个带有边框的 CSS 三角形，height并分别width设置0为，所以你不能指望子元素与三角形重叠

Answer 2

我不完全确定您要在这里实现什么。如果您希望文本位于黑色三角形内，您可以编辑出来

display:inline-block;

在 JSFiddle 中工作，但仅在 FireFox 和 Chrome 中测试过，可能需要检查更多浏览器。