CSS positioning the search menu correctly

user_14392296 0
Viewed 48
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>

css html jquery javascript
1 Answers

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>

user_153773550
Related