select2 - Select2 ドロップダウンの間違った位置

Question

Select2 ライブラリ (バージョン 4.0.1) を使用していますが、選択のドロップダウンの位置がおかしいです。下の画像で見ることができます。

select2ドロップダウンが選択領域に重なっていることがわかります。ドキュメントの例では、選択の下部に表示される必要があることがわかります。これが私のコードです

<select class="select2">
   <option>--Select--</option>
   <option>Sample Page</option>
</select>

<script>
  jQuery(document).ready(function() {
    jQuery('.select2').select2();
  });
</script>

なぜこれが起こっているのですか？