CSS3：z-index在iPad Safari中不起作用

Question

.chat-main-div{
  width: 320px;
    height: 100vh;
    background-color: #353535;
    position: fixed;
    top: 0;
    right:0;
}

.messages-appear-div{
  height: 76vh;
  overflow-y: auto;
  border:thin red solid;
}
.chatcomponent-chatroom-sendtext-div {
    position: fixed;
    width: 100%;
    bottom:0;
    background:white;
    height:76px;
}

<div class="chat-main-div">
  <div class="messages-appear-div">
    <div class="chatcomponent-chatroom-sendtext-div">
      chat sending area
    </div>
  </div>
</div>

您好，

我有一个固定的div，因为我有另一个固定的div，它附在底部。当我在iPad Safari中看到时，我看到第二个固定div隐藏在主div之后。

我不知道为什么它出现在iPas Safari中。

任何帮助都会很棒。

谢谢。

Answer 1

＆＃13;

＆＃13;

.chat-main-div{
  width: 320px;
    height: 105vh;
    background-color: #353535;
    position: fixed;
    top: 0;
    right:0;
    z-index:-1;
}

.messages-appear-div{
  height: 105vh;
  overflow-y: auto;
  border:thin red solid;
}
.chatcomponent-chatroom-sendtext-div {
    position: fixed;
    width: 320px;
    bottom:0;
    background:white;
    height:76px;
    right:0
}

＆＃13;

<div class="chat-main-div">
  <div class="messages-appear-div">
    <div class="chatcomponent-chatroom-sendtext-div">
      chat sending area
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我对您现有的CSS进行了一些更改。

希望这有帮助。