位置：已修复且javascript无效

Question

我有一个奇怪的问题。我的聊天室里有一个调色板，我不知道当我申请position:fixed时，JavaScript无法正常工作，如果我删除position:fixed它就可以了。

这是发生的事情还是我应该尝试另一种方式？我不知道如何在聊天对话框上叠加调色板，而不使用固定边距的位置将内容放置在我想要的位置。

任何输入？

我知道有很多代码，但我只是希望你在看到它时有一个想法。可能是我搞砸了什么。

错误必须在此页面或css上

的index.php

<div id="colorpickerB" style='display:none;'>
  <div id="colorpicker">
    <img src="palette.png" id="palette" alt="Color Palette" border="1"/>
    <br />
    <input id="color" type="hidden" readonly="true" value="#000000" />
  </div>    
</div>
<table id="content">
  <tr id="chat-top">
    <td>
      <div id="scroll">
      </div>
    </td>
  </tr>
  <tr id="chat-btm">
    <td colspan="2">
      <div id="items">
        <input type="text" class="" id="messageBox" placeholder="Enter your message here" maxlength="2000" size="30" />
      </div>
      <div id="color">
        <button type="button" id="sampleText" class="chat-btn" onclick="toggleElement('colorpickerB');">
          Color
        </button>
      </div>          
      <input type="hidden" class="" id="userName" value="<?php echo $log_username; ?>" maxlength="20"/>
      <input type="button" class="chat-btn" value="Send" id="send" />
      <?php
      if ($user_ok === true) {
          if (($log_userlevel == '7') || ($log_userlevel == '8')) {
            echo '<input type="button" class="chat-btn" value="Delete All" id="delete" />';
          }
        }
      ?>
    </td>
  </tr>
</table>

CSS

   #colorpicker {
   margin: 5px 0px 0px 6px;
   }
   #colorpickerB{
   position: fixed;
   margin: 90px 0 0px 461px;
   border: solid 1px black;
   width: 290px;
   height: 273px;
   background-color: white;
   z-index: 2000;
   }