CSS Div覆盖其中的其他div

今天我正在写一个关于我所编写的关于一个notifciation系统的问题。在下面的图像的背景是我已经嵌入的Flash文件游戏文件，我编写了一个Web套接字服务器，从相同的C＃服务器发送通知到JavaScript客户端代码并发送通知。CSS Div覆盖其中的其他div

预览图像：https://i.stack.imgur.com/QQqxo.png

正如你可以从上面看到的，我已经highlighed我的通知之一，问题是，有时一些对Flash文件的元素，并从你所看到的关闭按钮在我的其中一个通知中，由于其中一个div覆盖了关闭按钮，因此该按钮右侧的一小点可点击除外，因此其中一个通知不可点击。

我要跑你通过我的设置..

的Javascript：

var ws = new WebSocket('ws://localhost:8181/'); 

var hasConnected = false; 

function startWebSockets() { 
    ws.onmessage = function (messageEvent) { 
     onReceiveMessage(messageEvent.data); 
    }; 

    ws.onopen = function() { 
     onConnectionOpened(); 
    }; 

    ws.onclose = function() { 
     onConnectionClosed(); 
    } 
} 

function onReceiveMessage(messageData) { 
    var messageParts = messageData.includes('\\') ? messageData.split('\\') : messageData; 

    if (messageData.includes("\\")) { 
     if (messageParts[0] == "compose:show_custom_notification") { 
      showBootstrapNotification(messageParts[1], messageParts[2], messageParts[3], messageParts[4]); 
     } 
    } 
    else { 
     if (messageData == "compose:authentication_complete") { 
      console.log('Authentication to WebSocket server has been completed.'); 
     } 

     if (messageData == "compose:authentication_failed") { 
      sendMessage("client_identity_token " + habboSso); 
     } 
    } 
} 

function onConnectionOpened() { 
    console.log('Connected to the WebSocket server.'); 
    hasConnected = true; 

    sendMessage("client_identity_token " + habboSso); 
} 

function onConnectionClosed() { 
    if (!hasConnected) { 
     console.log('Failed to connect to the WebSocket server.'); 
    } 
    else { 
     console.log('Your connection to the WebSocket server was unexpectedly closed.'); 
    } 
} 

function sendMessage(message) { 
    if (hasConnected) { 
     ws.send(message); 
    } 
} 

startWebSockets(); 

function showBootstrapNotification(notificationTitle, notificationContent, notificationColor, notificationSize) { 
    console.log('trying to execute notification'); 

    var notificationArea = $('#notification_area'); 
    var notificationHtml = ''; 
    notificationHtml += '<div class="col-md-' + notificationSize + ' absolute-center">'; 
    notificationHtml += '<div class="draggable panel panel-pink">'; 
    notificationHtml += '<div class="panel-heading" style="background-color: ' + notificationColor + '">'; 
    notificationHtml += notificationTitle; 
    notificationHtml += '</div>'; 
    notificationHtml += '<div class="panel-body">'; 
    notificationHtml += notificationContent; 
    notificationHtml += '</div>'; 
    notificationHtml += '</div>'; 
    notificationHtml += '</div>'; 

    const newNot = $(notificationHtml); 
    notificationArea.prepend(newNot); 
    newNot.draggable(); 
}

这是我存放我的通知div的：

<div id="notification_area"> 
    <br><br> 
    <!-- Notificiations will automatically be added here. --> 
</div>

如果你读了showBootstrapNotification功能它在该div里面添加notification_area

我想我是一个什么sking是，我怎样才能阻止div无法点击？为什么当通知比它所占用的尺寸小得多时，占用了太多空间？这与col-md有关吗？任何帮助表示赞赏。

来源

2017-02-21 Liam Savage

不能帮助js，但你试图给通知面板一个更高的Z-索引只是为了强迫它的一切？

.notification-area { 
z-index: 100; 
}

来源

2017-02-21 01:05:34

但是，如果我打开了多个通知，并且它们都具有100的z-index，哪一个会在顶部出现？ –

这也没有什么用处，因为当闪光灯不可点击时它不能帮助我。 –

在自举，COL-MD-1占据屏幕的宽度的1/12，COL-MD-2是2/12，COL-MD-3是3/12等。至于使某个div始终可点击，请尝试在CSS中为该div添加高Z-index。

.div-to-click{ 
    z-index: 5; 
}

来源

2017-02-21 01:07:23

但是当覆盖Flash文件时会发生什么？ Flash文件也是不可点击的..我该如何解决这个问题？ –

CSS Div覆盖其中的其他div

回答

相关问题