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

回答

相關問題