title: HTML input popup calendar issue
body: <p>I am trying to pop a calendar control when a user clicks on an input field. The calendar control is actually a div section for calendar which I am trying to toggle the display. The issue is when I click on the input, the calendar does not show up. But the catch is, when I change the position property of input from "relative" to "fixed", then the calendar shows up but relative to the browser. I want it to be displayed relative to the input field.</p>
  
  <pre><code>    &lt;script&gt;
      function showCalendar(startDate)
      {
          try{
              //var inputElement = document.getElementById(startDate);
              var inputElement = document.getElementsByName(startDate)[0];
              var divCalendar = document.getElementById('calendar');
              var divContent = document.getElementById('content');
              if(divCalendar.style.display == 'block')
              {
                  divContent.appendChild(divCalendar);
                  //inputElement.style.position='fixed';
                  //divCalendar.style.position='fixed';
                  divCalendar.style.display = 'none';
                  //divCalendar.style.zindex = 0;
              }
              else
              {
                  divCalendar.parentNode.removeChild(divCalendar);
                  inputElement.appendChild(divCalendar);
                  inputElement.style.position='relative';
                  divCalendar.style.position='absolute';
                  divCalendar.style.top=30;
                  divCalendar.style.left=30;
                  //divCalendar.style.zindex = 100;
                  divCalendar.style.display = 'block';
              }
          }
          catch(e)
          {
              alert(e);
          }
  
      }
      &lt;/script&gt;
  
          &lt;body&gt;
  &lt;div id="content"&gt;
          &lt;table id="bookingTable"&gt;
              &lt;tr&gt;
                  &lt;th colspan="4"&gt;Book Rentals&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;th colspan="4"&gt;&lt;%=fileService.title%&gt;&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td style="text-align:right;"&gt;Start Date&lt;/td&gt;
                  &lt;td style="text-align:left;"&gt;
                  &lt;input style="cursor:pointer;" type="text" name="startDate" value="" onclick="showCalendar('startDate')"&gt;
                  &lt;/td&gt;
                  &lt;td style="text-align:right;"&gt;Start Time&lt;/td&gt;
                  &lt;td style="text-align:left;"&gt;&lt;input type="text" name="startTime" value=""&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td style="text-align:right;"&gt;End Date&lt;/td&gt;
                  &lt;td style="text-align:left;"&gt;
                  &lt;input style="cursor:pointer;" type="text" name="endDate" value="" onclick="showCalendar('endDate')"&gt;
                  &lt;/td&gt;
                  &lt;td style="text-align:right;"&gt;End Time&lt;/td&gt;
                  &lt;td style="text-align:left;"&gt;&lt;input type="text" name="endTime" value=""&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td colspan="4" style="text-align: center;"&gt;
                  &lt;input type="submit" class="button" name="submit" value="Add" /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
  
          &lt;div id="calendar" style="display: none;"&gt;
          Here is create a table dynamically which represent a calendar and which I am trying to toggle the display.
          &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>