Question

问题是.calendar div停留在页面顶部，我希望它在页面滚动时移动。

.calender{
    position:absolute;
    top:250px;
    left:600px;
    width:200px;
}   
.popup{
    width:980px;
    overflow:auto;
    height:500px;   
}


<div class="calender"></div>
<div class="popup">
    <input type="text" value="">
    <input type="text" value="">
</div>

Answer 1

我不知道你正在使用什么作为日历，但这应该可以帮助你开始..

position: absolute;总是会引用父position: relative;，如果你没有将它<html>作为亲戚使用，那就是滚动时不会失败的原因

我所做的是添加一个position: relative;容器，即使您滚动，也可以将日历保留在文本框旁边。

Here is a page about CSS positioning，你应该读它，这非常重要..

＆＃13;

.container{
  position: relative;
}
.calender{
width:200px;
}   
.popup{
position:absolute;
top:20px;
left:0;
width:980px;
overflow:auto;
height:500px;   
}

＆＃13;

<br /><br /><br /><br /><br /><br /><br /><br />
<div class="container">
  <input class="calender" type="text" value="sdsds">
  <div class="popup">
  <div style="width: 40px; height:40px; background-color:red;"></div>
    </div>
  </div>
</div>
<br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

＆＃13;

编辑：我再次阅读了您的问题，我知道即使您滚动也需要它在同一个地方，我不确定这是否是预期的行为，但是这里是另一个样本和一点解释..

position: fixed;总是将浏览器窗口视为父母position: relative;不会影响其定位的父母。

＆＃13;

.container{
  position: relative;
}
.calender{
width:200px;
}   
.popup{
position:fixed;
top: 100px;
left: 8px;
width:980px;
overflow:auto;
height:500px;   
}

＆＃13;

<br /><br /><br /><br />
<div class="container">
  <input class="calender" type="text" value="sdsds">
  <div class="popup">
  <div style="width: 40px; height:40px; background-color:red;"></div>
    </div>
  </div>
</div>
<br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

＆＃13;

Answer 2

尝试以下代码...我将位置更改为固定并将div更改为

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style media="screen">
    .calender {
      position: fixed;
      top: 250px;
      left: 600px;
      width: 200px;
      height: 200px;
      background-color: red;
    }
    .popup {
      width: 980px;
      overflow: auto;
      height: 500px;
    }
  </style>
</head>

<body>



  <div class="calender"></div>
  <div class="popup">
    <input type="text" value="">
    <input type="text" value="">
  </div>
</body>

</html>

绝对div定位

2 个答案: