I have main outer div. ----Inside that I have outer div --------and inside that I have inner search menu div --------and search menu content list div
Now I have given fixed position to inner search menu div. When I scroll outer div part It's position is fixed correctly.
The problem is when I scroll the main div [outer most]then also menu item div is still fixed and it is not scrolling with its outer div. How can I make it scroll with outer div.
.main{
width:600px;
height: 700px;
border:1px solid black;
position:relative;
}
.outer{
width:500px;
height: 500px;
border:1px solid black;
position:relative;
overflow:scroll;
}
.inner{
width:400px;
height: 40px;
border:1px solid black;
position:fixed;
}
.content{
margin-top:45px;
height:600px;
border:1px solid red;
width:100px
}<html>
<head>
</head>
<body>
<div class="main">
<div class="outer">
<div class="inner">
</div>
<div class="content">
</div>
</div>
</div>
</body>
</html>You could use position: sticky instead of fixed and define top and left:
.inner {
...
position: sticky;
top: 0;
left: 0;
}
In this case .main doesn't need a position.
Working example:
.main {
width: 600px;
height: 700px;
border: 1px solid black;
}
.outer {
width: 500px;
height: 500px;
border: 1px solid black;
position: relative;
overflow: scroll;
}
.inner {
width: 400px;
height: 40px;
border: 1px solid black;
position: sticky;
top: 0;
left: 0;
}
.content {
margin-top: 45px;
height: 600px;
border: 1px solid red;
width: 100px
}<div class="main">
<div class="outer">
<div class="inner"></div>
<div class="content"></div>
</div>
</div>You could also use position: absolute and define top and left:
.inner {
...
position: absolute;
top: 0;
left: 0;
}
In this case you have to define position: relative for .main but not for .outer.
Working example:
.main {
width: 600px;
height: 700px;
border: 1px solid black;
position: relative;
}
.outer {
width: 500px;
height: 500px;
border: 1px solid black;
overflow: scroll;
}
.inner {
width: 400px;
height: 40px;
border: 1px solid black;
position: absolute;
top: 0;
left: 0;
}
.content {
margin-top: 45px;
height: 600px;
border: 1px solid red;
width: 100px
}<div class="main">
<div class="outer">
<div class="inner"></div>
<div class="content"></div>
</div>
</div>