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

Question

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

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; 作为子元素，这样，您的绝对定位元素就不会t在野外流出，会相对于父元素，也会这样重叠

Demo

---

它也是一个带边框的 CSS 三 Angular 形，height 和 width 分别设置为 0，因此您不能期望子元素重叠三 Angular 形