Javascript 使用重叠div显示其他信息。JQuery

我想在div上显示其他内容/文本。 看小提琴：。还没有文本。但这不是问题所在

我正在使用代码，虽然我可以切换

h2

/

h1

类

$('#container .item.w1.h1').toggle(
    function() {
        $(this).css(
            {"height": "110px", "background": "black"}
        );
    },
    function() {
        $(this).css(
            {"height": "50px", "background": "#CCC"}
        );
    }
);

首先，我想得到的是'div.item.w1.h1'以重叠其较低的邻居。正如你现在所看到的，它正在从它的邻居的下面移动）我怎么能解决这个问题呢

我考虑的更高级的事情是，除了第一件事之外，如何使“div.item.w1.h1”div角朝父容器的中心增长/应用上述内容

---

非常感谢

向css函数添加z索引

---

为什么我要处理离其父容器边界最近的元素。。所以元素不会与父容器重叠？我不确定我是否理解您想要的：）请您进一步解释一下好吗？例如，右下角的div将向左/向上扩展，而不是向下扩展。无法跟踪哪个框位于容器底部。但我确保在调整框的大小时容器大小会更新。

 $('#container .item.w1.h1').toggle(
    function() {
        $(this).css(
            {"height": "110px", "background": "black", 'z-index':'10'}
        );
    },
    function() {
        $(this).css(
            {"height": "50px", "background": "#CCC", 'z-index':'0'}
        );
    }
);