相关疑难解决方法(0)

我已经分离了一个IE7 z-index错误的小测试用例,但不知道如何修复它.我z-index一整天都在玩.

z-indexIE7有什么问题？

测试CSS:

input {
    border: 1px solid #000;
}

div {
    border: 1px solid #00f;
}

ul {
    border: 1px solid #f00;
    background-color: #f00;
    list-style-type: none;
    margin: 0;
    padding-left: 0;
    z-index: 1000;
}

li {
    color: #fff;
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
}

span.envelope {
    position: relative;
}

span.envelope ul {
    position: absolute;
    top: 20px;
    left: 0;
    width: 150px;
}

测试HTML:

<form>
  <label>Input #1:</label>
  <span id="envelope-1" class="envelope">
    <input name="my-input-1" id="my-input-1" />
      <ul>
        <li>item</li> …

我在页面顶部的固定导航栏中使用了twitter bootstrap下拉菜单.

这一切都很好但是在显示其他页面元素后面而不是在它们前面的下拉菜单项有问题.

如果我在页面上有任何东西position: relative(如jquery ui手风琴或谷歌图表),那么下面的菜单会显示在它后面.尝试更改z-indexdd菜单和导航栏,但没有任何区别.

我可以让菜单位于其他内容之上的唯一方法是将内容更改为position: fixed;OR z-index: -1; ,但这两种解决方案都会导致其他问题.

感谢您能给我的任何帮助.

我认为这可能是CSS定位的一些标准问题,我误解了,所以没有发布任何代码,但如果需要可以做.

谢谢.

我试图让"box-left-mini"走到div下面.

<div class="box-left-mini">
   this div is infront
    <div style="background-image:url(/images/hotcampaigns/campaign-sample.png);height:100px;width:100px;">
        this div is behind
    </div>
</div>

CSS box-left-mini是:

.box-left-mini {
    float:left;
    background-image:url(website-content/hotcampaign.png);
    width:292px;
    height:141px;
}

我有类似的问题本.但那里的解决方案对我的问题不起作用.该讨论已经结束,以获得进一步的建议.不幸的是,我无法完全按照jsfiddle显示我的代码.但问题是这样的.当尝试扩展第一个面板部分内的下拉列表时,隐藏在其他元素后面的下拉列表.我花了好几个小时尝试关于"堆叠上下文","位置"和"z-index"的不同建议.如果有人能指出任何有用的资源,我真的很感激.

<div class="btn-group">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span data-bind="label">Select One</span>&nbsp;<span class="caret"></span>

                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Item 1</a>
                        </li>
                        <li><a href="#">Another item</a>
                        </li>
                        <li><a href="#">This is a longer item that will not fit properly</a>
                        </li>
                    </ul>
                </div>