CSS - How can i make first row always fixed?

Question

I have an unordered list(<ul>) where i have a few elements. Now in my list at the top I have select all and a Go button. I want Select all and Go button fixed indepedent of the scrollbar. I tried giving position:fixed to the (li) of Select All but when the values increase the position of Select All distorts. Please guide.

.scrollClass {
  overflow: auto;
}

.scrollClass select {
  border: none;
}

.dropDown, testClass {
  padding-left: 0px !important;
  z-index: 999999999;
  position: absolute;
}

.rowClass {
  cursor: pointer;
  padding: 5px;
  border: 1px solid #94c0d2;
  list-style: none;
  border-bottom-style: none;     
}

<h3>Name</h3>

<ul class="testClass" style=" padding-left:0px; margin-bottom:0px;">
  <li>
    <input type="text" name="name" id="myText">
  </li>
</ul>

<ul class="dropDown" style="max-height:200px; overflow-y:scroll; margin-top:2px;">
  <li class="rowClass" style=" max-width:400px; min-width:400px; ">
    <label>  
      <input type="checkbox" id="check" value="0"> Select All
    </label>
    <input type="button" value="Go" style="float:right;">
  </li>
  <li class="rowClass" style=" max-width:400px; min-width:400px;">
    <label>          
      <input type="checkbox" name="allClass" class="checkBoxClass"> Test      
    </label>
  </li>
  <li class="rowClass" style=" max-width:400px; min-width:400px;">
    <label>          
      <input type="checkbox" name="allClass" class="checkBoxClass"> Test1
    </label>
  </li>
  <li class="rowClass" style=" max-width:400px; min-width:400px;">
    <label>          
      <input type="checkbox" name="allClass" class="checkBoxClass"> Test2
    </label>
  </li>
  <li class="rowClass" style=" max-width:400px; min-width:400px;">
    <label>          
      <input type="checkbox" name="allClass" class="checkBoxClass"> Test3
    </label>
  </li>
  <li class="rowClass" style=" max-width:400px; min-width:400px;">
    <label>          
      <input type="checkbox" name="allClass" class="checkBoxClass"> Test4
    </label>
  </li>
  <li class="rowClass" style=" max-width:400px; min-width:400px;">
    <label>          
      <input type="checkbox" name="allClass" class="checkBoxClass"> Test5
    </label>
  </li>
  <li class="rowClass" style=" max-width:400px; min-width:400px;">
    <label>          
      <input type="checkbox" name="allClass" class="checkBoxClass"> Test5
    </label>
  </li>
  <li class="rowClass" style=" max-width:400px; min-width:400px;">
    <label>          
      <input type="checkbox" name="allClass" class="checkBoxClass"> Test5
    </label>
  </li>
  <li class="rowClass" style=" max-width:400px; min-width:400px;">
    <label>          
      <input type="checkbox" name="allClass" class="checkBoxClass"> Test5
    </label>
  </li>
</ul>

Answer 1

You could add another ul after the Select All li and modify the inline-styling for it and its parent ul.

ul {padding:0}

.scrollClass {
  overflow: auto;
}

.scrollClass select {
  border: none;
}

.dropDown, testClass {
  padding-left: 0px !important;
  z-index: 999999999;
  position: absolute;
}

.rowClass {
  cursor: pointer;
  padding: 5px;
  border: 1px solid #94c0d2;
  list-style: none;
  border-bottom-style: none;     
}

<h3>Name</h3>

<ul class="testClass" style="padding-left:0px; margin-bottom:0px;">
  <li>
    <input type="text" autocomplete="off" name="name" id="myText">
  </li>
</ul>

<ul class="dropDown" style="margin-top:2px;">
  <li class="rowClass" style="width:400px">
    <label>  
      <input type="checkbox" id="chkAll" value="0"> Select All
    </label>
    <input type="button" value="Go" style="float:right;">
  </li>
  <ul style="max-height:200px; overflow-y:scroll;">
    <li class="rowClass" style="max-width:400px; min-width:400px;">
      <label>          
        <input type="checkbox" name="allClass" class="checkBoxClass"> Test      
      </label>
    </li>
    <li class="rowClass" style="max-width:400px; min-width:400px;">
      <label>          
        <input type="checkbox" name="allClass" class="checkBoxClass"> Test1
      </label>
    </li>
    <li class="rowClass" style="max-width:400px; min-width:400px;">
      <label>          
        <input type="checkbox" name="allClass" class="checkBoxClass"> Test2
      </label>
    </li>
    <li class="rowClass" style="max-width:400px; min-width:400px;">
      <label>          
        <input type="checkbox" name="allClass" class="checkBoxClass"> Test3
      </label>
    </li>
    <li class="rowClass" style="max-width:400px; min-width:400px;">
      <label>          
        <input type="checkbox" name="allClass" class="checkBoxClass"> Test4
      </label>
    </li>
    <li class="rowClass" style="max-width:400px; min-width:400px;">
      <label>          
        <input type="checkbox" name="allClass" class="checkBoxClass"> Test5
      </label>
    </li>
    <li class="rowClass" style="max-width:400px; min-width:400px;">
      <label>          
        <input type="checkbox" name="allClass" class="checkBoxClass"> Test6
      </label>
    </li>
    <li class="rowClass" style="max-width:400px; min-width:400px;">
      <label>          
        <input type="checkbox" name="allClass" class="checkBoxClass"> Test7
      </label>
    </li>
    <li class="rowClass" style="max-width:400px; min-width:400px;">
      <label>          
        <input type="checkbox" name="allClass" class="checkBoxClass"> Test8
      </label>
    </li>
  </ul>
</ul>

Answer 2

Move Select All input field in above <ul> tag

.scrollClass{
   overflow: auto;
}

.scrollClass select{
   border: none;
}

.dropDown, testClass{
   padding-left:0px !important;
   z-index:999999999;
   position:absolute;
}

.rowClass{
   cursor:pointer;
   padding:5px;
   border:1px solid #94c0d2;
   list-style:none;
   border-bottom-style:none;     
}

<h3>
Name
</h3>
<ul class="testClass" style=" padding-left:0px; margin-bottom:0px;">
  <li>
      <input type="text" autocomplete="off" name="name" id="myText"/>
  </li>
  <li class="rowClass" style=" max-width:400px; min-width:400px;">
      <label>
          <input type="checkbox" id="chkAll" value="0"/> Select All
      </label>
      <input type="button" value="Go" style="float:right;"></input>
  </li>
</ul>
<ul class="dropDown" style="max-height:200px; overflow-y:scroll; margin-top:2px;">
  <li class="rowClass" style=" max-width:400px; min-width:400px;">
      <label>
          <input type="checkbox" name="allClass" class="checkBoxClass"/> Test
      </label>
  </li>
  <li class="rowClass" style=" max-width:400px; min-width:400px;">
      <label>
          <input type="checkbox" name="allClass" class="checkBoxClass"/> Test1
      </label>
  </li>
  <li class="rowClass" style=" max-width:400px; min-width:400px;">
      <label>
          <input type="checkbox" name="allClass" class="checkBoxClass"/> Test2
      </label>
  </li>
  <li class="rowClass" style=" max-width:400px; min-width:400px;">
      <label>
          <input type="checkbox" name="allClass" class="checkBoxClass"/> Test3
      </label>
  </li>
  <li class="rowClass" style=" max-width:400px; min-width:400px;">
      <label>
          <input type="checkbox" name="allClass" class="checkBoxClass"/> Test4
      </label>
  </li>
  <li class="rowClass" style=" max-width:400px; min-width:400px;">
      <label>
          <input type="checkbox" name="allClass" class="checkBoxClass"/> Test5
      </label>
  </li>
  <li class="rowClass" style=" max-width:400px; min-width:400px;">
      <label>
          <input type="checkbox" name="allClass" class="checkBoxClass"/> Test6
      </label>
  </li>
  <li class="rowClass" style=" max-width:400px; min-width:400px;">
      <label>
          <input type="checkbox" name="allClass" class="checkBoxClass"/> Test7
      </label>
  </li>
  <li class="rowClass" style=" max-width:400px; min-width:400px;">
      <label>
          <input type="checkbox" name="allClass" class="checkBoxClass"/> Test8
      </label>
  </li>
</ul>

Answer 3

though my vote goes to @Satendra but please also Try this

.scrollClass {
  overflow: auto;
}

.scrollClass select {
  border: none;
}

.dropDown, testClass {
  padding-left: 0px !important;
  z-index: 999999999;
  position: absolute;
}

.rowClass {
  cursor: pointer;
  padding: 5px;
  border: 1px solid #94c0d2;
  list-style: none;
  border-bottom-style: none;     
}
.rowClass:first-child {
position: fixed;
background: #ffffff;
border: 1px solid #94c0d2;
}

<h3>Name</h3>

<ul class="testClass" style=" padding-left:0px; margin-bottom:0px;">
  <li>
    <input type="text"  autocomplete="off" name="name" id="myText">
  </li>
</ul>

<ul class="dropDown" style="max-height:200px; overflow-y:scroll; margin-top:2px;">
  <li class="rowClass" style=" max-width:400px; min-width:400px; ">
    <label>  
      <input type="checkbox" id="chkAll" value="0"> Select All
    </label>
    <input type="button" value="Go" style="float:right;">
  </li>
  <li class="rowClass" style=" max-width:400px; min-width:400px;">
    <label>          
      <input type="checkbox" name="allClass" class="checkBoxClass"> Test      
    </label>
  </li>
  <li class="rowClass" style=" max-width:400px; min-width:400px;">
    <label>          
      <input type="checkbox" name="allClass" class="checkBoxClass"> Test1
    </label>
  </li>
  <li class="rowClass" style=" max-width:400px; min-width:400px;">
    <label>          
      <input type="checkbox" name="allClass" class="checkBoxClass"> Test2
    </label>
  </li>
  <li class="rowClass" style=" max-width:400px; min-width:400px;">
    <label>          
      <input type="checkbox" name="allClass" class="checkBoxClass"> Test3
    </label>
  </li>
  <li class="rowClass" style=" max-width:400px; min-width:400px;">
    <label>          
      <input type="checkbox" name="allClass" class="checkBoxClass"> Test4
    </label>
  </li>
  <li class="rowClass" style=" max-width:400px; min-width:400px;">
    <label>          
      <input type="checkbox" name="allClass" class="checkBoxClass"> Test5
    </label>
  </li>
  <li class="rowClass" style=" max-width:400px; min-width:400px;">
    <label>          
      <input type="checkbox" name="allClass" class="checkBoxClass"> Test5
    </label>
  </li>
  <li class="rowClass" style=" max-width:400px; min-width:400px;">
    <label>          
      <input type="checkbox" name="allClass" class="checkBoxClass"> Test5
    </label>
  </li>
  <li class="rowClass" style=" max-width:400px; min-width:400px;">
    <label>          
      <input type="checkbox" name="allClass" class="checkBoxClass"> Test5
    </label>
  </li>
</ul>