将元素放置在另一个垂直居中的

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

我建议将所有内容放在div1中的一个subdiv中，您可以从#field中获得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/

Answer 3

Marts答案对于样式而言是正确的，但单击时不会显示/隐藏。我添加了一些jQuery来实现这一点：

if (this.bObj) {
   this.administrativeArea = this.bObj.objectareacollection.reduce(function (

$("#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;
}