Question

我有一个用户列表，当我点击某个用户时，会打开一个聊天框（https://github.com/irontec/angular-bootstrap-simple-chat）。我设置了聊天框position: absolute。问题是这个聊天框会禁用它背后的所有内容，比如按钮不再单击[即使聊天框关闭（不可见）]。

我尝试使用z-index，但没有运气，因为当我将此聊天框显示在其他元素后面时，此聊天框中的按钮将失去功能。有没有人有绝对位置元素的这种经历？

HTML：

<div class="chat-box">
    <irontec-simple-chat
            messages="MainViewVM.messages"
            username="MainViewVM.username"
            input-placeholder-text="You can write here"
            submit-button-text="{{MainViewVM.submitButtonText}}"
            title="{{MainViewVM.title}}"
            theme="material"
            submit-function="MainViewVM.sendMessage"
            visible="MainViewVM.visible"
            expand-on-new="{{MainViewVM.expandOnNew}}">
    </irontec-simple-chat>
</div>

CSS：

.chat-box
{
    position: absolute;
    width: 300px;
    height: 400px;
    bottom: 120px;
    right: 260px;
}

plnkr.co/edit/ppaA1NvnL2vPxvI3teVr?p=preview

Answer 1

按钮Open chat更改了聊天窗口的显示，而不是聊天框。容器聊天框仍然呈现，可见但透明（！）。一个简单的解决方案是隐藏容器chat-box并强制其内容可见。它会起作用并且与角度代码没有冲突，因为角度正在播放显示，而不是可见性。

.chat-box {
  visibility: hidden;
  position: absolute;
  width: 300px;
  height: 400px;
  bottom: 120px;
  right: 260px;
}
.chat-window {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  visibility: visible;
}

Answer 2

得到了JoëlHecht对我所犯错误的回答。

只需删除自定义类“chat-box”并使用该指令自己的类“chat-window”。

HTML：

<irontec-simple-chat
        messages="MainViewVM.messages"
        username="MainViewVM.username"
        input-placeholder-text="You can write here"
        submit-button-text="{{MainViewVM.submitButtonText}}"
        title="{{MainViewVM.title}}"
        theme="material"
        submit-function="MainViewVM.sendMessage"
        visible="MainViewVM.visible"
        expand-on-new="{{MainViewVM.expandOnNew}}">
</irontec-simple-chat>

CSS：

.chat-window
{
    position: absolute;
    width: 300px;
    height: 400px;
    bottom: 0;
    right: 15px;
}

Working Plinker：

https://plnkr.co/edit/ppaA1NvnL2vPxvI3teVr?p=preview

绝对位置元素禁用其背后元素的功能

HTML：

CSS：

2 个答案:

HTML：

CSS：

Working Plinker：