Привязка к полю

Есть такое оформление вывода выпадающего календаря:

input.date {text-align:left;}
.mm {position:absolute; padding:.2em; border:1px solid #ccc; background-color:#fff; z-index:2;}
.mm table {border-collapse:separate; table-layout:fixed; text-align:center; font-family:arial, tahoma; font-size:15px;}
.mm col {width:2em; }
.mm col.red {background-color:#ffffcc;}
.mm td {padding:0; vertical-align:middle; height:1.5em; }
.mm td div {padding: .1em 0 0 0; border:1px solid #999; border-color:#ddd #777 #777 #ddd; cursor:default;}
.mm td div:hover, .mm td .hover {background-color:#eee; border-color:#777 #ddd #ddd #777 ;}
.mm div.red {color:#c00;}
.mm select {margin-right:0;}
.mm .ri {text-align:right;}
.mm p {margin:0;}
.disnone {display:none;}
ol {text-align:left; width:40em; font-size:.75em; margin:0 auto; font-family:verdana;}

При прокрутке страницы календарь остается на месте, а не двигается вместе с полем ввода. Как исправить?