草庐IT

html - z-index 不能正常工作

coder 2023-08-08 原文

有问题的页面:

http://meyers.ipalaces.org/sitemap/

第一个<LI>应该是 z-index: 2;并且应该在任何其他 <LI> 之上再向下。 (迈耶斯)

CSS:

.sitemap #primaryNav > ul > li {
    float: none;
    background: #ffffff url('images/L1-left.png') center bottom no-repeat;
    z-index: 2;
    position: relative;
}

想法是#fff 的背景颜色应该在<LI> 之上的下面，因此创建类似于此的效果:

http://astuteo.com/slickmap/demo/

如果您在上述链接上使用 Firebug 并禁用 position:relative 来自 #primaryNav #home你会发现它看起来像我的。我不确定如何让它像他们一样。

最佳答案

我要指出的第一件事是，在您的情况下，“主页”不是站点地图中的原点。虽然可能希望它在视觉上看起来像那样，但在语义上并非如此。 SlickMap理解这一点(或者也许他们只是幸运)，这就是为什么在他们的 html 中“主页”li与其他主要页面处于同一级别。唯一高于其他页面的是根，它没有页面(尽管大多数人将根重定向到“主页”)。

其次，曾经是 parent 的z-index已设置，除非子项设置为 position: absolute并且父级未设置为position: relative , 所有子级都被认为开始在堆叠顺序方面比父级高一级。这是在 9.9.1 Specifying the stack level: the 'z-index' property 下的 CSS 2.1 标准中定义的。作为(强调我的):

The order in which the rendering tree is painted onto the canvas is described in terms of stacking contexts. Stacking contexts can contain further stacking contexts. A stacking context is atomic from the point of view of its parent stacking context; boxes in other stacking contexts may not come between any of its boxes.

所以，虽然SlickMap能够告诉你:

The first <LI> should be z-index: 2; and should be on top of any other <LI> further down.

在您的设计中这样做没有区别，因为移动第一个 li向上移动所有它的 child 。而且，由于您的 home block 中的子级开始他们自己的堆叠上下文，比父级高一级，因此您的“home”li 永远不会高于其中的元素。

现在这已经不在了。我用 SlickMap 查看了您的代码代码以了解差异。正如您在下面看到的，这里几乎只有一个合理的选项可以 100% 兼容。

z-index确实支持负数，但是，由于“home”和它的 sibling 之间的堆叠上下文不同，你不能在这里使用它。但是，如果“家”的每个 child 都设置为 position: absolute和“家”li被设置为 position: static (默认)在某些极端情况下，您可以使用 z-index: -1在那些 child 身上，让他们看起来落后于 parent 。但是，您还必须有其他变量可用(例如 parent 的 parent 的背景是透明的)并且，最重要的是，您必须手动定位每个 child 。显然这不是一个好主意。更不用说 z-index 中的负面因素了在 IE6/7 中有问题。

你需要做的是，如SlickMap做了，合并第一个ul在li下包含“家”与 ul.level--0 .这将导致以下层次结构:

ul
--Home
--Meyers
    --Another Level
--M....
    --Another Level
--etc

然后，您应该可以申请z-index: 2到“家”li你会得到你正在寻找的结果。显然，结构的变化可能还需要对您的样式进行其他更改。

CSS 3 属性可能在某些方面可以帮助您，但我不想深入探讨，因为我不确定您的要求。

希望 CSS 布局 strcutres 中的这一课对您有足够的帮助，以便您就如何推进元素做出明智的决定。如果您对我所说的内容有任何其他问题，请告诉我。

关于html - z-index 不能正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5150862/

z-indexindexcodenoreferrerhtmlcss

有关html - z-index 不能正常工作的更多相关文章

  1. ruby-on-rails - 由于 "wkhtmltopdf"，PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  2. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

  3. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  4. ruby - 无法让 RSpec 工作—— 'require' : cannot load such file - 2

    我花了三天的时间用头撞墙，试图弄清楚为什么简单的“rake”不能通过我的规范文件。如果您遇到这种情况:任何文件夹路径中都不要有空格!。严重地。事实上，从现在开始，您命名的任何内容都没有空格。这是我的控制台输出:(在/Users/*****/Desktop/LearningRuby/learn_ruby)$rake/Users/*******/Desktop/LearningRuby/learn_ruby/00_hello/hello_spec.rb:116:in`require':cannotloadsuchfile--hello(LoadError) 最佳

  5. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  6. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  7. ruby-on-rails - rspec should have_select ('cars' , :options => ['volvo' , 'saab' ] 不工作 - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion在首页我有:汽车:VolvoSaabMercedesAudistatic_pages_spec.rb中的测试代码:it"shouldhavetherightselect"dovisithome_pathit{shouldhave_select('cars',:options=>['volvo','saab','mercedes','audi'])}end响应是rspec./spec/request

  8. ruby-on-rails - s3_direct_upload 在生产服务器中不工作 - 2

    在Rails4.0.2中，我使用s3_direct_upload和aws-sdkgems直接为s3存储桶上传文件。在开发环境中它工作正常，但在生产环境中它会抛出如下错误，ActionView::Template::Error(noimplicitconversionofnilintoString)在View中，create_cv_url,:id=>"s3_uploader",:key=>"cv_uploads/{unique_id}/${filename}",:key_starts_with=>"cv_uploads/",:callback_param=>"cv[direct_uplo

  9. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  10. ruby-on-rails - 无法让 rspec、spork 和调试器正常运行 - 2

    GivenIamadumbprogrammerandIamusingrspecandIamusingsporkandIwanttodebug...mmm...let'ssaaay,aspecforPhone.那么，我应该把“require'ruby-debug'”行放在哪里，以便在phone_spec.rb的特定点停止处理？(我所要求的只是一个大而粗的箭头，即使是一个有挑战性的程序员也能看到:-3)我已经尝试了很多位置，除非我没有正确测试它们，否则会发生一些奇怪的事情:在spec_helper.rb中的以下位置:require'rubygems'require'spork'

随机推荐