标签: z-index

我尝试创建一个下拉菜单。这就是我到目前为止所做的： http://gegensinn.org/test.html （我使下拉菜单始终可见以进行“调试”）

我认为问题很明显：菜单位于文本后面。

首先我想我可以用 z-index 来解决这个问题。

虽然我不太确定哪个元素必须获得 z-index 属性。

我尝试将整个菜单设置为z-index:100;并同时z-index:1;设置 .main。

后来我尝试只设置 的 z-index<li>但 <a>没有任何效果。

我有一个 div，<p>标签内有文本，还有一个 PNG 图像。我希望图像位于 div 的左侧，并且文本重叠。我尝试过使用 z-index 但收效甚微。

HTML 代码：

<div class="caption">
    <img src="images/stain.png" id="stain">
    <p>The BA New Media course which I am studying is run by the Institute of Comminications Studies (ICS) at The University of Leeds. The Institute of Communications Studies is an internationally renowned centre for teaching and research in communications, media and culture. Their research is multidisciplinary and has particular strengths in the areas of cultural industries, international communication and political communication. <a href="http://ics.leeds.ac.uk/about/" …

我为此绞尽脑汁也想不出来。我有重叠的 DIV，但我无法将提交按钮（登录）置于顶部。

http://swaptoria.com/

您会在右侧看到登录按钮和主区域中的一个 DIV，该 DIV 阻止该按钮可点击。

任何建议将不胜感激！

我在一个 div 下有一个链接，高度和宽度为 100%，固定位置和 z-index: 5。我需要将此 div 保持在我的链接上方，但链接不起作用。我可以使链接工作但将此 div 保留在我的链接上方吗？

https://jsfiddle.net/8hu90e9x/1/

div {
  background:grey;
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  opacity:0.5;
  z-index:5
}

a {
  font-size:50px;
  z-index:0
}

<a href="http://google.com"> My link</a>

<div></div>

似乎我的下拉菜单的 z-index 做了一些奇怪的事情：

https://uma.be/evenement/uma-day-2020-best-media-campaigns/

当您将鼠标悬停在菜单项“佣金”时，下拉菜单位于图像下方。

我已经检查了图像本身的 z-index 和.mega-sub-menu. 对我来说两者都很好。该类.mega-sub-menu的 z-index 为 999，而图像没有一个。

我已经添加position: relative; z-index: 1;到图像中，但这并没有解决问题。

Lazy loader 是否有可能对图像执行某些操作以使其越过子导航？

我想控制哪个DisplayObject显示在正面或背面.
我可以用css中的zIndex样式控制它.

我怎么能这样做呢？

我在一个2列布局的页面中使用ckeditor.左列有一个带有ckeditor的表单,右列有一个图像和一些内容.

可以通过拖动右下角来调整ckeditor textarea的大小,但是ckeditor窗口会在右列中的图像/内容"下方".

这就像ckeditor的z-index低于另一列中的图像/内容,我想改变这种行为,以便ckeditor"高于"图像.

可能吗？

我正在处理一个网站的麻烦.

菜单中的下拉列表在除<IE10之外的所有浏览器中都能正常工作.我正试图让它在IE8 +上工作.

问题是,显示了下拉列表和下拉菜单的边框,但是当它位于标题之外时,其中的所有内容都被隐藏.

我尝试过经典的bug修复,即将main-wrapper设置为相对位置,并为header-wrapper提供更高的z-index,但没有任何反应.

该网站:http://playground.pixby.se/startup/index.html

我整天都在这个页面上工作,我已经接近完成它,但是有些事情没有意义.

我有一个图像居中,图像<section>底部有一个菜单.我写了一些脚本,以便当<a>鼠标悬停在菜单中的一个标签上时,位于所有内容之上的透明div的背景图像会变为另一个图像.它似乎工作得很好,除了图像是在中心图像后面,这是该部分的一部分.这可能会让人感到困惑,但是如果你走到http://casperfitzhue.co.uk/totemindex.html的顶部并将鼠标悬停在"Young Gods"按钮上,你就会明白我的意思.

只有一半的掩模出现在左侧,就好像它位于主图像的下方,尽管div的z-index高于主图像的z-index,所以这不应该发生.我还注意到在检查Chrome的"Inspect Element"中的代码时,Div的z-index似乎被划掉了,这意味着它没有被应用 - 我不明白为什么？

这是HTML:

 <section id="cover">
  <div id="maskover"></div>
   <img src="coverimage.png" id="coverimage" width="1180" height="800" alt="cover photo">   
 </section>

这是CSS:

#maskover{
  height:424px;
  width:366px;
  position:fixed;
  left:0px;
  top:0px;
  z-index:300px;
  background:none;
  background-image:url(invisible.png);
}

section#cover {
  background:url(noise.png) #170e56;
  height: 830px;
  width: 100%;
  padding: 0px;
  position: relative; 
  text-align:center;
}

#coverimage{
  width:1180px;
  position:absolute;
  top:0px;
  left:50%;
  margin-top:0px;
  margin-left:-590px;
  z-index:200px;
}

这是JAVASCRIPT:

$('a#godsnav').hover(function() {
  $('div#maskover').css('background-image', 'url(overlaymask1.png)');
}, function() {
  $('div#maskover').css('background-image', '');
});

(#godsnav是菜单按钮)

任何帮助都会很棒!谢谢

我试图回答这个问题：如何使输入框周围的彩色渐变发光？

我的问题，问题是为什么在rainbowBg DIV出现over的input，而不是落后吗？我已经尝试定位输入absolute，设置z-indexes，但没有任何效果。

<div class="rainbowWrap">
    <div class="rainbowBg"></div>
    <input class="rainbow" type="text"/>
</div>

尝试输入输入。只有在输入边框和rainbowBgdiv 之间单击时，才可以对其进行聚焦。我只在Chrome中测试过。

http://jsfiddle.net/b03acbdu/4/