CSS下拉菜单在IE9中由容器截断 [英] CSS Dropdown menu cutoff by container in IE9

问题描述

我对此帖子有一个非常相似的问题：

不同的是，在我的情况下，我需要在容器上设置z-index（因此位置）。您可以在这里查看我的JSFiddle：

http：// jsfiddle.net/qbaH9/4/

在完整布局中，有一个元素，我通过添加z-index在标题下方滑动：100到标题，您可以在此图片中看到。

如何在标题上保留z-index设置，并确保下拉菜单在IE9中不会被截断？

解决方案

从 .main-header 中删除​​ position：relative

http://jsfiddle.net/qbaH9/3/

I have a very similar problem to this post:

CSS Flyout menu gets cut off by borders of its container in IE9

The difference is that in my case I need to have the z-index (and therefore position) set on the container. You can see my JSFiddle here:

http://jsfiddle.net/qbaH9/4/

In the full layout there is an element that I "slide under" the header by adding z-index: 100 to the header, as you can see in this image.

How do I keep the z-index set on the header, and also make sure the dropdown isn't cutoff in IE9?

解决方案

Remove position: relative from the .main-header.

http://jsfiddle.net/qbaH9/3/

这篇关于CSS下拉菜单在IE9中由容器截断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！