Размещение элемента под другим с вертикальным центрированием

Question

Вот мои HTML и CSS:

 #div1 {
     height:100px;
     width:200px;
     border: 1px solid red;
     position: fixed;
    }
    
    #field{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    
    
    #dp a{display:block;}

    <div id= "div1">
    <div id="field"><input placeholder="Type something...." ></div>
    <div id="dp"><a>ITEM</a><a>ITEM</a><a>ITEM</a><a>ITEM</a><a>ITEM</a><a>ITEM</a><a>ITEM</a> </div>
    </div>
  

вот чего я хочу достичь:

Желтая часть простой раскрывающийся список, который должен отображаться в фокусе и соответствовать ширине элемента ввода. Я сделал много попыток, но застрял в размещении раскрывающегося списка прямо под родительским элементом div с центрированным вводом.

Answer 1

Добавьте следующий стиль и надейтесь, что вы получите то, что ищете.

#dp {
    position: absolute;
    left: 20px;
    top: 58px;
}

Answer 2

Ответ Marts правильный для стиля, но он не отображается / не скрывается при нажатии. Я добавил несколько jQuery, чтобы это произошло:

$("#field input").focus(function(){
    $("#dp").addClass('show_dp');
  });

  $("#field input").focusout(function(){
    $("#dp").removeClass('show_dp');
  });

#div1 {
 height:100px;
 width:200px;
 top:15px;
 left:15px;
 border: 1px solid red;
 position: fixed;
}

#subdiv1{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


#dp {
  position:absolute;
  top:100%;
  background-color:#ff0;
  color:blue;
  width:100%;
  display: none;
  padding:4px 0;
}

#dp a {
  display:block;
}

.show_dp {
  display: block !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id= "div1">
  <div id="subdiv1">
    <div id="field">
      <input placeholder="Type something...." >
    </div>
    <div id="dp">
      <a>ITEM</a>
      <a>ITEM</a>
      <a>ITEM</a><a>ITEM</a>
      <a>ITEM</a>
      <a>ITEM</a>
      <a>ITEM</a>
    </div>
  </div>
</div>

Answer 3

Я предлагаю разместить все содержимое внутри div1 в подразделе, которому вы можете присвоить css значения из поля #.

html:

<div id= "div1">
<div id="subdiv1">
<div id="field"><input placeholder="Type something...." ></div>
<div id="dp"><a>ITEM</a><a>ITEM</a><a>ITEM</a><a>ITEM</a><a>ITEM</a><a>ITEM</a><a>ITEM</a> </div>
</div>
</div>

Css:

#div1 {
 height:100px;
 width:200px;
 top:50%;
 border: 1px solid red;
 position: fixed;
}

#subdiv1{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


#dp {
  position:absolute;
  top:100%;
  background-color:#f00;
  width:100%;
}

#dp a {
  display:block;
}

https://jsfiddle.net/6kxz1c9L/