[英]HTML/CSS Put a DIV on top of other with z-index
I've 3 main layers in my website: 我的网站中有3个主要层:
1) Main view with elements inside (#views in jsbin) - BOTTOM LAYER 1)内部包含元素的主视图(jsbin中的#views)-底部图层
2) Overlay (with white background opacity .8 #overlay in jsbin) - MIDDLE LAYER 2)叠加层(在jsbin中具有白色背景不透明度.8 #overlay)-中层
3) Context menu (#contextmenu in jsbin) - TOP LAYER 3)上下文菜单(jsbin中的#contextmenu)-顶层
When I show the context menu, the 3 layers are displayed correctly -> main view is "hidden" by the transparent overlay and the context menu is on the top. 当我显示上下文菜单时,将正确显示3层->透明叠加层将“主视图”“隐藏”,并且上下文菜单位于顶部。
Now my problem is that I want to pop out an element inside the main view. 现在我的问题是我想在主视图中弹出一个元素。 I want to display this element (#card1 in jsbin) between the context menu and the overlay...but I'm not able to achieve this. 我想在上下文菜单和叠加层之间显示此元素(jsbin中的#card1)...但是我无法实现。 Is it possible? 可能吗?
Here is my jsbin: http://jsbin.com/gaxadaci/7/edit 这是我的jsbin: http ://jsbin.com/gaxadaci/7/edit
Thanks for your help. 谢谢你的帮助。 Kind regards, Bastien 亲切的问候,巴斯蒂安
Add position:relative
to the card; 添加position:relative
对于卡; z-index
is not applied to static
elements. z-index
不适用于static
元素。
It is important to note that if any parent of your "element to pop out" has its own z-index
defined, then this method will not work (and there'll be no way to "pop it out") because that parent defines the stacking context for its children. 需要注意的是,如果你的“元素蹦出”任何父母都有自己的是很重要z-index
定义的,那么这种方法是不行的 (并且以后还有没有办法“之弹出”),因为该父定义其子级的堆叠上下文。
Simply add "position: relative" to your card div 只需在您的卡片div中添加“ position:relative”
#card1 {
z-index: 2;
position: relative;
}
JSbin http://jsbin.com/gaxadaci/13/ JSbin http://jsbin.com/gaxadaci/13/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.