Question

请在此处查看链接：

转到底部，蓝色按钮在iphone x旁边显示“获得预先批准”。我需要知道当我在页面和网站的其他部分成功使用此按钮时为什么该按钮不起作用（同一类，相同的行为）。

此外，在有人建议之前，我已经使用了大约1000个z-index值，不是吗。我对为什么按钮不起作用感到困惑。

Answer 1

如果从#iPhoneText_Container中消除z索引：-100，它将解决此问题。但是，它将破坏您的手机img。

#iPhoneText_Container {
 float: left;
 position: absolute;
 margin: 150px 0 0 75px;
}

更新：如果删除background-color：#FFFFFF;来自#IphoneTextBlock它将解决问题

#iPhoneTextBlock {
 width: 70%;
 padding: 20px;
 margin: 0 0 0 90px;
 font-family: 'Montserrat',! sans-serif important;
 position: ;
 border: solid 0px #000;
 -webkit-box-shadow: 0px 9px 22px -13px rgba(0,0,0,1);
 -moz-box-shadow: 0px 9px 22px -13px rgba(0,0,0,1);
 box-shadow: 0px 9px 22px -13px rgba(0,0,0,1);
}

Answer 2

将#iPhoneText_Container更改为z-index: 1，然后将以下内容添加到#iPhone_blue：

position: relative;
z-index: 5;

Answer 3

如果您已经编写了页面顶部的“从这里开始”按钮div（父div的z-index高），因此在#ApplyNow_button上的悬停效果是：悬停正常。

但是对于预先批准的button / div，即使您具有steps-button div（.steps-button：hover）的悬停样式，该样式也会被页面上的其他div拦截。

<div class="steps-button" style="float: left">Get Pre-Approved</div>

我注意到iPhoneText_Container放置在所有div下方。将iPhoneText_Container的z-index设置为99999，可以解决此问题。

#iPhoneText_Container {
 float: left;
 position: absolute;
 margin: 150px 0 0 75px;
 z-index: 99999;
}

或者您也可以在CSS下方简单地添加样式。

#iPhoneText_Container {
  z-index: 99999 !important;
}

为什么我的按钮不起作用？它没有点击，没有徘徊...任何东西

3 个答案: