草庐IT

javascript - jQuery 淡入位置 :absolute causes z-index issue

coder 2024-05-08 原文

从技术上讲，我使用的是 fadeToggle() 但它们是表兄弟...基本上我的问题是我有一个绝对定位的 div，我正在使用 slideToggle() on 但在动画完成之前不会设置 Z-index。结果是，在淡入淡出期间，相邻 div 中的文本(其 z-index 值低于淡入的 div)出现在具有更高 z-index 的淡出 div 的“顶部”。

有人熟悉这个怪癖吗？知道任何解决方法吗？

编辑:请允许我澄清一下:当动画完成时，z-index 会正确解析，但在过渡期间文本位于其上方。

最佳答案

我刚刚遇到了同样的问题，所以我想我会分享解决方案。正如你所说，当元素用 绝对定位时，jQuery 会用 fadeIn()、fadeOut()、slideToggle() 等做一些事情>z-index，它下面的元素也被定位为绝对位置并被赋予一个 z-index。

如果删除底部元素，您会发现动画运行良好。但是对于“子元素”，您只有在完全淡入时才会得到淡入。这是因为 z-index 只有在动画完成后才会被确认。

解决方案是在每个要淡入的元素周围创建一个容器。您也可以在所有元素周围创建一个容器，但请记住，您不会对淡入的子元素产生任何悬停或单击效果容器 div 存在。

因此，在我的示例中，我将只使用您尝试淡入的一个 div。假设您有一个“放大”功能，该功能在动画期间被隐藏了:

<div id="zoomin"></div>

#zoomin {
  position:absolute; top:20px; right:20px; 
  display:block; z-index:15;
  width:47px; height:48px;
}

当前放大会消失。所以解决方案是将它包装在一个容器中并将以下 css 应用于该容器:

<!-- this is your container -->
<div id="zoomincontainer" class="keepontop">

  <!-- this is your div --> 
  <div id="zoomin"></div>

<!-- end container -->
</div>

#zoomincontainer {
  top:20px; right:20px;      
  with:47px; height:48px;
}

div.keepontop {
  position:absolute; z-index:14;
}

这将为您的 div 应用基础，并在动画期间将其保持在其他层之上。

请注意，因为您的“zoomin”div 是绝对定位的，所以您必须将宽度、高度和位置特征应用到您的容器“zoomincontainer”div。否则你会发现你的容器 div 位于页面/框架的左上角，尺寸为 0px x 0px - 它不会成为任何东西的基础，除非它覆盖你正在制作动画的 div 下方的整个区域。

我将 PA 和 z-index 放在“keepontop”类中，以防您有许多淡入淡出的 div。

现在就像一个魅力。希望对您有所帮助!

关于javascript - jQuery 淡入位置 :absolute causes z-index issue，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7055269/

javascriptabsolutecodedivz-indexjquerydebugging

有关javascript - jQuery 淡入位置 :absolute causes z-index issue的更多相关文章

  1. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  2. ruby - 正则表达式在哪个位置失败？ - 2

    我需要一个非常简单的字符串验证器来显示第一个符号与所需格式不对应的位置。我想使用正则表达式，但在这种情况下，我必须找到与表达式相对应的字符串停止的位置，但我找不到可以做到这一点的方法。(这一定是一种相当简单的方法……也许没有？)例如，如果我有正则表达式:/^Q+E+R+$/带字符串:"QQQQEEE2ER"期望的结果应该是7 最佳答案 一个想法:你可以做的是标记你的模式并用可选的嵌套捕获组编写它:^(Q+(E+(R+($)?)?)?)?然后你只需要计算你获得的捕获组的数量就可以知道正则表达式引擎在模式中停止的位置，你可以确定匹配结束

  3. jquery - 如何将 AJAX 变量从 jQuery 传递到他们的 Controller ？ - 2

    我有一个电子邮件表格。但是我正在制作一个测试电子邮件表单，用户可以在其中添加一个唯一的电子邮件，并让电子邮件测试将其发送到该特定电子邮件。为了简单起见，我决定让测试电子邮件通过ajax执行，并将整个内容粘贴到另一个电子邮件表单中。我不知道如何将变量从我的HAML发送到我的Controllernew.html.haml-form_tagadmin_email_blast_pathdoSubject%br=text_field_tag'subject',:class=>"mass_email_subject"%brBody%br=text_area_tag'message','',:nam

  4. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  5. ruby - 下载位置 Selenium-webdriver Cucumber Chrome - 2

    我将Cucumber与Ruby结合使用。通过Selenium-Webdriver在Chrome中运行测试时，我想将下载位置更改为测试文件夹而不是用户下载文件夹。我当前的chrome驱动程序是这样设置的:Capybara.default_driver=:seleniumCapybara.register_driver:seleniumdo|app|Capybara::Selenium::Driver.new(app,:browser=>:chrome,desired_capabilities:{'chromeOptions'=>{'args'=>%w{window-size=1920,1

  6. ruby - Heroku production.log 文件位置 - 2

    我想在heroku.com上查看我的应用程序日志的内容，所以我关注了thisexcellentadvice并拥有我所有的日志内容。但是我现在很想知道我的日志文件实际在哪里，因为“log/production.log”似乎是空的:C:\>herokuconsoleRubyconsoleforajpbrevx.heroku.com>>files=Dir.glob("*")=>["public","tmp","spec","Rakefile","doc","config.ru","app","config","lib","README","Gemfile.lock","vendor","sc

  7. ruby - 在 Ruby 中查找多个正则表达式匹配的模式和位置 - 2

    这应该是一个简单的问题，但我找不到任何相关信息。给定一个Ruby中的正则表达式，对于每个匹配项，我需要检索匹配的模式$1、$2，但我还需要匹配位置。我知道=~运算符为我提供了第一个匹配项的位置，而string.scan(/regex/)为我提供了所有匹配模式。如果可能，我需要在同一步骤中获得两个结果。 最佳答案 MatchDatastring.scan(regex)do$1#Patternatfirstposition$2#Patternatsecondposition$~.offset(1)#Startingandendingpo

  8. ruby-on-rails - 尝试打开 .gitignore 以在文本编辑器中对其进行编辑，但在 OS X Mountain Lion 上找不到文件位置 - 2

    我使用“newapp_name”创建了一个新的Rails应用程序，我正在尝试编辑.gitignore文件，但在我的应用程序文件夹中找不到它。我在哪里可以找到它？我安装了Git。 最佳答案 .gitignore位于项目的root中，而不是app子目录中。首先打开终端并进入您的目录。您需要使用ls-a来显示stash文件。然后使用打开.gitignore 关于ruby-on-rails-尝试打开.gitignore以在文本编辑器中对其进行编辑，但在OSXMountainLion上找不到文件位

  9. ruby-on-rails - 在 Rails 中存储(结构化)配置数据的位置 - 2

    对于我正在编写的Rails3应用程序，我正在考虑从本地文件系统上的XML、YAML或JSON文件中读取一些配置数据。重点是:我应该把这些文件放在哪里？Rails应用程序中是否有用于存储此类内容的默认位置？附带说明一下，我的应用程序部署在Heroku上。 最佳答案 我经常做的是:如果文件是通用配置文件:我在目录/config中创建一个YAML文件，每个环境有一个上层key如果我为每个环境(大项目)创建一个文件:我为每个环境创建一个YAML并将它们存储在/config/environments/然后我在加载YAML的地方创建了一个初始化

  10. Ruby:数组中的下一个/上一个值，循环数组，数组位置 - 2

    假设我有一个没有特定顺序的随机数数组。假设这些是参加马拉松比赛的人的ID#，他们按照完成的顺序添加到数组中，例如:race1=[8,102,67,58,91,16,27]race2=[51,31,7,15,99,58,22]这是一个简化且有些做作的示例，但我认为它传达了基本思想。现在有几个问题:首先，我如何获得特定条目之前和之后的ID？假设我正在查看运行者58，我想知道谁在他之前和之后完成了比赛。race1,runner58:previousfinisher=67,nextfinisher=91race2,runner58:previousfinisher=99,nextfinishe

随机推荐