Question

我需要设计以下元素：第一个父元素 - 菜单
子元素 - 弹出窗口第二个父元素 - 正文

我需要将弹出窗口带到前面然后是正文然后菜单。这有可能吗？

Html
    <div class="menu">
       <div class="popup">
          Test content
       </div>
    </div>
    <div class = "body-content"></div>
CSS
.menu {
   z-index: -1;
}

所以现在我的身体内容会出现在前面，菜单会回来。但现在我试图点击弹出div。它只是身体内容的背后。我需要把它带到前面。

堆叠层 1.弹出窗口 2.身体内容 3.菜单

提前致谢。

Answer 1

如果没有示例，代码展示或任何其他示例，您的问题就不容易理解。

但我认为你可以通过使用负z-index做你想做的事。

修改：我看到您已编辑过您的问题，但要知道您的意思仍然不是那么容易。

但这是我最好的猜测：

http://codepen.io/Type-Style/pen/rjOzWa

.popup {
        /* decoration */
        border: 2px dotted;
        background: rgba(255,125,0,0.6);

        /* place above menu and body-content */
        position: relative;
        z-index: 1;
        top: 30px; /* create overlap for demo */
    }
    .body-content {
        background: rgba(255,0,0,0.6);
        position: relative;
        z-index: -1;
        bottom: 30px; /* create overlap for demo */
    }

＆＃13;

div {
	/* just decoration styles */
	width: 350px;
	margin: 0 auto;
	padding: 10px 0;
}
.menu {
	background: rgba(50,50,255,0.6); /* opaque background color for understanding */

}
.popup {
	/* smaller for decoration */
	width: 300px; 
	border: 2px dotted;
	background: rgba(255,255,0,0.6);

	/* place above menu and body-content */
	position: relative;
	z-index: 2;
	top: 25px; /* create overlap for demo */
}
.body-content {
	background: rgba(255,0,0,0.6);
	position: relative;
	z-index: 1;
	bottom: 40px; /* create overlap for demo */
}

＆＃13;

<div class="menu">
	Menu Test Content: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
	<div class="popup">
		Test content popup. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
	</div>
</div>
<div class="body-content">
	Body-Content and more random Text: 
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. <br />body-content test-content: malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
</div>

＆＃13;

我认为你想要的是一个弹出所有东西。我不明白是否需要在菜单上方添加内容。但这就是我做的方式。

注意：为了使z-index能够处理特定元素，需要position: relative;。

通过使用相对，元素占据的尺寸仍然存在。如果您不想要，可以定义

position: absolute;

这会使定位变得有点棘手，因为它被放置到最近的非静态父元素。

父元素和子元素中的z-index问题

1 个答案:

但这是我最好的猜测：