I have a chat area that I am trying to bind with knockoutJS. This chat area will be floating with position fixed using css
.floatingDiv
{
width: auto;
float: right;
position: fixed;
top: 58%;
height: 255px;
z-index:0;
}
There are few anchor tags and buttons present on the page and in few cases are moved behind the chatarea. When this happens I am unable to click on the anchor tags/buttons.
Below is the sample where I am unable to click link "google redirection"
<!DOCTYPE html>
<html xmlns="http://ift.tt/lH0Osb">
<head>
<title></title>
</head>
<body>
<script src="Scripts/jquery-2.1.4.js"></script>
<script src="Scripts/knockout-3.3.0.js"></script>
<style>
.floatingDiv
{
width: auto;
float: right;
position: fixed;
top: 58%;
height: 255px;
z-index:0;
}
.labelBox
{
float: right;
background: white;
border: 1px solid gray;
margin-right: 30px;
margin-left:30px;
height: 280px;
width: 250px;
}
.labelBoxHeaderColor {
background-color:#0094ff;
}
</style>
<script type="text/javascript">
function MyViewModel(){
var self =this;
self.list = ko.observableArray(['1', '2', '3']);
}
$(document).ready(function(){
var vm = new MyViewModel();
ko.applyBindings(vm);
});
</script>
<div>
Hello world<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<a href="http://www.google.com">Google Redirection</a>
</div>
<div class="floatingDiv">
<!-- ko foreach: list -->
<table class="labelBox" data-bind="attr:{id: 'index' +$index() }" >
<tbody>
<tr data-bind="attr:{id: 'header' +$index() }" ">
<th class="labelBoxHeaderColor">
<table width="100%">
<tbody>
<tr>
<td style="width: 5%;"> <span width="1" height="1" data-bind="text: 'label' + $index()">
</td>
</tr>
</tbody>
</table>
</th>
</tr>
<tr>
<td>
<div style="height: 215px; overflow: auto;">
<table data-bind="attr:{id: 'mainArea' +$index() }" >
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<!-- /ko -->
</div>
</body>
</html>
I tried setting z-index for links more than z-index for the floatingDiv but that didnt help me. Can someone suggest on how I can make all the links/buttons present behind the chat area clickable in any scenario?
Aucun commentaire:
Enregistrer un commentaire