Проблема в том, что .calendar div находится в верхней части страницы, и я хочу, чтобы он перемещался при прокрутке страницы.Абсолютное позиционирование 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>
Я не знаю, что вы используете в качестве календаря, но это должно помочь вам начать ..
position: absolute; всегда reffers к родителю position: relative;, если у вас нет какой-либо он будет используйте <html> как относительный, поэтому он не сходит, когда вы прокручиваете.
Что я сделал - это добавить контейнер position: relative;, чтобы держать календарь всегда рядом с текстовым полем, даже если вы прокручиваете.
Here is a page about CSS positioning, вы должны прочитать его, это очень важно ..
.container{
position: relative;
}
.calender{
width:200px;
}
.popup{
position:absolute;
top:20px;
left:0;
width:980px;
overflow:auto;
height:500px;
}
<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 />EDIT: Я снова прочитал ваш вопрос, и я понял, что вам это нужно в том же даже если вы прокручиваете, я не уверен, что это ожидаемое поведение, но вот еще один пример и небольшое объяснение.
position: fixed; Allways reffers в окно браузера в качестве родителя любого родителя position: relative; не influentiate на этом позиционировании ..
.container{
position: relative;
}
.calender{
width:200px;
}
.popup{
position:fixed;
top: 100px;
left: 8px;
width:980px;
overflow:auto;
height:500px;
}
<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 />Попробуйте следующий код ... Я изменил позицию фиксированные и изменился ДИВ появляться
<!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>
Возможно, попробуйте 'fixed', а не' absolute' – Andrew
Посмотрите на мой ответ, но это одна из альтернатив, которая может заинтересовать [ miguelmpn