title: Bring javascript calendar control to the front?
body: <p>I have two javascript date pickers on my asp.net site:
  <img src="https://i.stack.imgur.com/9l3K6.png" alt="enter image description here"></p>
  
  <p>When I click the from date picker, it looks like this:
  <img src="https://i.stack.imgur.com/zVW9g.png" alt="enter image description here"></p>
  
  <p>As you can see, the calendar pop-up appears behind the next set of fields on the screen.</p>
  
  <p>My question is, what can I do to make this control appear in front of (or, over, rather) the fields on the screen?</p>
  
  <p>EDIT:
  Here is the code for this particular date picker:</p>
  
  <pre><code>&lt;td rowspan="2" style="background-color: #A5C2FA; padding-left: 1px; text-align: center;"&gt;
    &lt;a onclick=" showCalendarControl(txtFromDate) " href="#"&gt;
    &lt;img src="../images/calendar.gif" style="height: 20px; width: 20px;" border="0" alt="Calendar" /&gt;&lt;/a&gt;
   &lt;/td&gt;
  </code></pre>
  
  <p>And here is my CSS (I've added the z-index change for ui-datepicker, but it's doesn't appear to help):</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      .body
      {
          background-color: #006699;
      }
  
      .outermost_body
      {
          background: White;
          border-color: Black;
          border-style: solid;
          border-width: 2px;
          height: 120px;
          left: 10px;
          position: absolute;
          text-align: left;
          top: 200px;
          width: 700px;
      }
  
      .outermost_grid
      {
          height: 320px;
          left: 10px;
          position: absolute;
          text-align: left;
          top: 200px;
          width: 500px;
      }
  
      .searchTable
      {
          background-color: #C9EAF3;
          left: 5px;
          padding: 1px;
          position: absolute;
          text-align: left;
          top: 50px;
          width: 700px;
          z-index: 900;
      }
  
      .fieldcellText input
      {
          background-color: #D7E5F2;
          border: 1px solid #284279;
          color: #102132;
          font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
          margin-left: 0px;
          width: 150px;
      }
  
      .ui-datepicker
      {
          z-index: 999;
      }
  &lt;/style&gt;
  </code></pre>