标签: z-index

我的网页中有多个 div。有这个 javascript 幻灯片，我在该幻灯片上放置了一个菜单并定位了 div 绝对值。我已经用 z-indexes 格式化了订单。它们在 Firefox 中运行良好，但 Internet Explorer 不适用于此。什么是解决方案。

提前致谢。

好的,首先我遇到2个问题,默认wmode为"window".我的网页导航菜单将在我的flex/flash应用程序下.另一个问题是在Flash应用程序中滚动整个页面会滚动.

我将wmode更改为"opaque",这解决了导航菜单的问题,现在它们显示在Flash应用程序上方.多数民众赞成好,但现在我在Flash应用程序中根本没有滚动.

我意识到这是一个很大的问题,但我似乎无法找到解决这两个问题(实际上是2.5个问题)的任何解决方案.

我想A)导航链接显示在Flash应用程序上方,因此它们不会被隐藏; B)允许在Flash应用程序内滚动; 和C)如果鼠标悬停在Flash应用程序上,则阻止滚动网页.

如果你们有任何想法会很棒.:) 提前致谢.

我有这个问题,如果我使用SWFObject附加一个swf文件,它会忽略我对z-index的css规则.我试图设置父容器,swf文件及其周围的一切; 似乎没有什么对我有用.有没有人遇到这个问题,可以给我一些有用的建议吗？

谢谢,凯尔

我的页面上有一个水平导航栏,它向下推几个像素,与下面div的内容重叠.我希望在内容div的背景后面放置一些链接,但我无法找到一种方法来保留一些链接(例如当前页面的链接).这是我有的:

<div id="header">
    <ul id="nav">
    <li><a href="index.php" class="index">index</a></li>
    <li><a href="project.php" class="project">project[]</a></li>
    <li><a href="contact.php" class="contact">contact</a></li>
    <li><a href="about.php" class="about">about</a></li>
    </ul>
</div>
<div id="content">
</div>

相关CSS:

div#content {
        background:#444;
        border-radius:15px;
        padding:40px 30px 30px 30px;
        clear:left
    }
div#header {
        position: relative;
        margin-left:20px;
        top: 13px;
    }


ul#nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;

}

ul#nav li {
    display:inline;
}

ul#nav a {
    text-decoration:none;
    color: #444;
    font-size: 30px;
}

我正在使用每个链接的类来确定它是否指向当前页面,所以我希望该链接能够突出显示.问题是这些中的每一个的堆叠上下文都在div或ul内.

我的PHP代码有一个小问题,如果有人可以帮助我,那将是非常好的.我想在鼠标悬停在链接上时显示图像.这是我现在拥有的PHP代码的链接:

<a href="<?php the_permalink(); ?>"><?php if ( has_post_thumbnail() ) {the_post_thumbnail();} else if ( has_post_video() ) {the_post_video_image();}?></a>

此代码显示了一个图像,但我想在将鼠标悬停在带有图像的链接上时执行此代码:

<?php echo print_image_function(); ?>

该代码还显示属于某个类别的图像.我不希望初始图像消失我只是想在第一张图像上方悬停在第一张图像上时显示第二张图像.

我不知道它是否有用,但我使用的是Wordpress,而且我不是PHP专家.我甚至不知道这是否会起作用.这就是为什么我要问有人可以帮我这个.

提前致谢

感谢大家

我要感谢所有花时间阅读我的帖子并通过提供解决方案帮助我的人.在如此快的时间里,我没有想到这么多答案.花了几个小时试图让它与PHP,CSS和Javacript一起工作后,我在这个网站上偶然发现了以下问题:解决方案

这正是我寻找的地方,经过一些修改以满足我的需求,我开始工作了.有时候,在寻找艰难的方式时,事情会变得如此简单.因此,对于遇到相同问题的每个人:您可以使用其中一个解决方案,这些解决方案由优秀人员在此处提供,或者查看上面的链接.

再次感谢!:)

我在wordpress http://heather.stevenspiel.com/上有一个简单的博客,我正在努力使标题标题成为主页的链接.我进入了header.php并重写了该部分的脚本,但仍无法获得工作链接.

这就是我重写的内容:

<h1>
   <a href="http://heather.stevenspiel.com/" style="cursor:pointer !important;">My Spiel</a>
  <br/>&nbsp;
</h1>

我知道由于css颜色的变化,href正在注册.

这是以前的代码:

    <h1>
        <?php
            if ($balloons_option['balloons_site-title_line1'] == '' && $balloons_option['balloons_site-title_line2'] == '') { ?>
            This is a<br />
            WordPress theme
        <?php } else {
            echo $balloons_option['balloons_site-title_line1']; ?><br />
            <?php echo $balloons_option['balloons_site-title_line2'];       
        } ?>
    </h1>

我最初尝试将href放在h1之外,但仍然没有运气.

是否有一些隐藏的Wordpress设置会禁用可点击的标题？或者是否有一些我应该注意的JavaScript是禁用它？

我还应该注意标题的css包含一个z-index.我读到某处可能会受到影响:

#header .content {
line-height: 18px;
margin: 0;
z-index: 4;
}

如果z-index正在影响它,那为什么呢？

我有很多动态创建的元素,只要它获得z-Index ++,所以最新的元素随时都在上面.当点击其中一个时,他的z-Index max + 1.所以我需要获得元素,这是最重要的,我该怎么做？

原生JS只请.谢谢

http://jsfiddle.net/XwrZ6/

这显示了一个下拉ul.sub-menu框(),其中框阴影应隐藏在主菜单栏条(#main)后面.我不明白为什么子菜单中的盒子阴影出现在主导航栏上方 - 两个元素都被定位并且设置了z-index.

(为此,下拉列表会永久显示,显然在生存时它仅在父项li悬停时显示).

谢谢.

HTML:

<nav id="main">
<div class="mw">
    <div class="menu-main-menu-container">
        <ul>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
            <li><a href="#">Item 4</a>
                <ul class="sub-menu">
                    <li><a href="#">Sub 1</a></li>
                    <li><a href="#">Sub 2</a></li>
                    <li><a href="#">Sub 3</a></li>
                    <li><a href="#">Sub 4</a></li>
                </ul>
            </li>
       </ul>
    </div>                  
</div>
</nav>

CSS:

/* main nav */
nav#main {
    height: 40px;
    background: #fff;
    -webkit-box-shadow:  0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    box-shadow:  0px 0px 10px 0px rgba(0, 0, 0, …

有点奇怪,我试图在图像上叠加几个链接,只在IE(所有版本)中显示它们在图像后面.适用于Chrome,Firefox等.

我已经尝试给每个元素一个合适的z-index,但它实际上没有任何区别.

我发誓我之前已经完成了这么多次问题.

这是一个JSFiddle:http: //jsfiddle.net/SY8xp/

<a href="#" class="logo-link-a"><span>Link 1</span></a>
<a href="#" class="logo-link-b"><span>Link 2</span></a>
<img src="http://lorempixel.com/212/43" width="212" height="43" alt="" id="logo" />

.logo-link-a span, .logo-link-b span {
    display: none;
}

.logo-link-a {
    display: block;
    position: absolute;
    width: 50px;
    height: 50px;
    margin: 25px 0px 0px 0px;
}

.logo-link-b {
    display: block;
    position: absolute;
    width: 165px;
    height: 50px;
    margin: 25px 0px 0px 50px;
}

#logo {
    margin-top: 30px;
}

我有一个带有插入阴影的容器div,我在这个容器里面也有子元素,我只想让这些孩子可以点击.

设置子项(我的项目中的图像,不确定是否重要)元素的z-index为-1对于显示阴影是必不可少的.但是这样做容器将覆盖子元素,因此单击将不起作用.

设置指针事件:无; 容器元素上也没有帮助(我也希望容器可以滚动).

$('.item').on('click', function() {
  alert($(this).attr('id'));
});

    .container {
      position: absolute;
      width: 250px;
      height: 250px;
      border-radius: 50%;
      box-shadow: inset 0 0 10px black;
      overflow-y: scroll;
      overflow-x: hidden;
    }
    .item {
      width: 250px;
      height: 80px;
      margin: 3px 0;
      background-color: #cacaca;
      position: relative;
      text-align: center;
      z-index: -1;
      /*Shadow visible, JS doesn't work*/
      /*z-index: 0;*/
      /*Clickable, but shadow is covered */
    }

<div class="container">
  <div class="item" id="item1">
    <p>CLICK</p>
  </div>
  <div class="item" id="item2">
    <p>CLICK</p>
  </div>
  <div class="item" id="item3">
    <p>CLICK</p>
  </div>
  <div class="item" …