标签: z-index

我现在正在一个页面上工作,该页面上有一列用性感的阴影和角落设置的方框,并使用这里的示例.我不得不承认,我并不完全理解CSS的工作原理,但它看起来很棒.

最顶部的框内是用于搜索的文本类型输入.该搜索框连接到YUI自动完成小部件.

在Mac上的Firefox3,Windows上的FF2,Mac上的Safari中,一切正常.在WinXP上的IE7中,自动填充建议在圆角盒子下方呈现,使得除了第一个之外的所有内容都不可读(尽管你仍然可以看到盒子之间有足够的窥视,我觉得IE7确实得到了不止一个建议).

我在哪里可以开始寻找纠正问题的方法？

以下是WinXP上FF2的成功:

这是IE7中失败的样子:

见例子

单击show container链接后,将在UI对话框下方显示datepicker组件 - 第二个输入.我该怎么做才能在UI对话框上面显示它？

我试图让一个绝对定位的元素出现在另一个元素后面.我已经设置了z-indices,但似乎没有任何影响.我试图在背景中放置的元素是最重要的.

有问题的两个元素都位于容器中,其位置设置为相对.我的理解是,这将创建一组新的堆叠元素,虽然我不确定这是否真的很重要.

HTML:

    <div id="wrapper">
      <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer augue</p>
        <p>massa, scelerisque non viverra sagittis, egestas nec erat. Aliquam vel</p>
      </div>
      <div id="bg">&nbsp</div>
    </div>

CSS:

      #wrapper {
        background: #fdd;
        position: relative;
        width: 300px;
      }

      #content{
        width: 300px;
        z-index: 100;
      }

      #bg{
        background: #ddf;
        position: absolute;
        bottom: 0;        
        left: 0;
        top: 0;
        width: 40%;
        z-index:1;
      }

你可以在这里看到结果:http://jsfiddle.net/GsG28/

这在Chrome和IE中都有发生,尽管我还没有测试过其他浏览器.我得到的是这样的:

我想要的是文本在蓝色背景之上.

我正在为我的客户在这个网站上工作.

问题是主页上的下拉菜单隐藏在嵌入式youtube播放器后面.这似乎是一个涉及z-index的简单css问题,但我无法解决它.也许它与youtube嵌入有关.

我试图设置菜单的z-index但它似乎没有效果.

我几乎忘了告诉你IE9上的问题具体发生了.

另外,我不是css专家,所以请指出问题所在.

试图让这里显示的布局http://www.reversl.net/zindex/看起来像附加的图像澄清.....徽标(标题的一部分)需要覆盖图像.图像需要与标题的底部完美对齐.我知道这可以使用z-index实现,但我究竟能怎么做呢？

header {
width: 100%;
height: 30px;
background: #222;
position: relative;
z-index: 3000;
}

#login {
width: 30%;
float: right;
text-align: right;
padding: .5em 0;
z-index: 5000;
}

#logo {
    width: 25%;
    float: left;
    padding: 3em 3em 1em 3em;
    text-align: center;
    z-index: 9999;
    background: #222;
}

.logo-text {
font: 2em/1em "lucida grande";
display: inline-block;
color: #777;
}  

#bg {
margin: -2em 0 0 0;
clear: both;
}

我有以下代码创建一个Twitter Bootstrap标头.标题在功能上运行得很好但是当我使用较小的浏览器并且标题最小化到下拉菜单时,标题的背景不会显示在网页上的内容之前.因此,例如标题的文本将在前面,但图像和文本输入之类的内容显示在下拉背景前面.我没有更改任何twitter bootstrap css,这是我的HTML:

<div class="navbar navbar-fixed-top">
              <div class="navbar-inner">
                <div class="container">
                  <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </a>
                  <a class="brand" href="/">Exployre</a>
                  <div class="nav-collapse">
                    <ul class="nav">

                      <li><a href="/map">Find</a></li>
                      <li><a href="/shareadventure">Share</a></li>
                      <li><a href="/connect">Connect</a></li>
                      <li><a href="/posts">Discuss</a></li>
                      <li><a href="/profile">Profile</a></li>
                      <li><a href="/about">About</a></li>
                      <li>
                  <li>        
                <form action="/search" class="navbar-search">
                  <div>
                    <input type="text" placeholder="Search" class="search-query pull-right" name="q" size="55" />
                  </div>
                </form>
                  </li>

                    </ul>
                  </div><!--/.nav-collapse -->
                </div>
              </div>
            </div>

你如何把孩子放在一个z指数较高的父母兄弟面前？

我想把粉红色的盒子放在果岭前面.

http://jsfiddle.net/Tim86/YRTxt/

<style>
#wrapper{
    position:relative;
    width:400px;
}
#red, #green{
    height:200px;
    width:400px;
}
#red{
    background-color:red;
    position:relative;
    z-index:10;
}
#pink{
    background-color:pink;
    height:250px;
    width:150px;
    top:50px;
    right:20px;
    position:absolute;
    z-index:40;
}
#green{
    opacity:0.8;
    background-color:green;
    position:relative;
    z-index:20;
    top:-50px;
}
</style>

<div id="wrapper">
    <div id="red">
        <div id="pink">
        </div>
    </div>
    <div id="green">

    </div>
</div>
?

如果您使用Internet Explorer 10 检查以下网站,则导航的子菜单将隐藏在图像后面.

我尝试调整z-index值,帮助Firefox/Chrome但不支持IE.代码可以在这里找到.

<style>
body {
    width: 100%;
    height: 100%;
    margin:0;
    padding:0;
    background-color: #393939;
}
/*micro-clearfix by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/*/
/* For modern browsers */
.cf:before, .cf:after {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}
/*horizontal menu styles*/
nav {
    background: #916A31;
    height: 2.3em;
}
ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
}
ul {
    background: #D5973C;
    height: 2em; …

我在包装div中有2个div，我想知道是否可以将#wrapper div放在内容的顶部（#outer和#inner）。

    <div id="wrapper">
       <div id="outer">
          <div id="inner"></div>
       </div>
    </div>

我希望#wrapper添加透明背景而不对HTML进行任何更改。我尝试使用z-index这样做没有成功。

看到这个小提琴：http : //jsfiddle.net/nPpDE/

任何帮助深表感谢。

我一直在玩一个响应式网站,当所有菜单和徽标在Coda中运行良好时,滑动到位,我在Chrome中尝试了网站,徽标似乎隐藏在标题后面 - 任何帮助都感激不尽!

HTML

<div id="menu">
   <div class="menu">
      <ul>
         <li><a href="#">Prices</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Contact</a></li>
         <li class="contact"><span>&#9990;</span><a href="#"> 0783 448 5449</a></li>
      </ul>
   </div>
</div>
<div class="container">
<div class="sixteen columns">
   <div id="track">
      <div class="logo"><img src="images/logo-120.png"></div>
   </div>
</div>

CSS:

#menu {
    position: fixed;
    top: 50px;
    height: 50px;
    background-color: rgba(255,255,255,0.9);
    width: 100%;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    box-shadow: 0 0 5px #888;
    text-align: center;
    z-index: 3000;
}

.menu ul li { …