如何在调整大小时将绝对定位元素保留在屏幕上

Question

我有一个类似于此http://jsfiddle.net/hsmishka/54t32vfc/2/的自定义下拉菜单。 如何在调整窗口大小时保持绝对位置的下拉菜单？ 正确的东西：0;但只有当它不适合窗户。

<div class="outer"> 
    <div class="dropdown"> 
     <ul> 
      <li>item 1</li> 
      <li>item 2</li> 
     </ul> 
    </div> 
<div> 
.outer { 
    position: relative; 
    margin: 100px; 
    width: 400px; 
    border: 1px solid green; 
} 

.dropdown { 
    position: absolute; 
    background: #EEE; 
} 

li { 
    background: grey; 
    height: 20px; 
    width: 200px; 
} 

Answer 1

我认为外层标签也需要是绝对的，因为它包裹了下拉标签。试试吗？

Answer 2

我不确定你的最终目标是什么。但您可能需要的是一些媒体查询。真的，我会建议检查Bootstrap，因为它是为响应式设计而构建的。

但要得到你想要的东西的工作，你需要确保下拉父被设置为：

position: relative; 

那么你的下拉菜单将被约束到父。否则，它将是对身体或任何最近的相关元素。

Answer 3

JSFiddle

Position:fixed; right:0; 

它的工作。