How can i make a fixed box inside a div with scroll?


Tags: javascript,jquery,html,css

Problem :

How I can make a box to be fixed within a div with scroll?

I'm trying like this:

HTML:

<div id="wrapper">
    <div class="main">
        <div class="container">
            <div class="container2">
                <div class="test"></div>
                <div class="test"></div>
                <div class="test"></div>
            </div>
        </div>
    </div>
</div>

CSS:

#wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    color: #a3265e;
    font-family: 'GillSans-SemiBold';
}
.main {
    border: 1px solid red;
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding-top: 380px;
}
.container {
    border: 1px solid green;
    position: relative;
    /*width: 946px;*/
    height: 500px;
    margin: 0 auto;
    overflow: scroll;
}
.container2 {
    height: 1500px;
    margin: 0 auto;
}
.test {
  width: 500px;
  height: 500px;
  position: fixed;
  left: 50%;
  margin-left: -250px;
  background: black;
}

But the box is going along with the page, not only within the div.

What am i doing wrong here??? Can someone show me the way?

Thank you guys.


EDIT

Example -> https://jsfiddle.net/kzhuh7sv/embedded/result/



Solution :

Try this solution https://jsfiddle.net/yyt8eope/2/ I added a div that wraps both the container div and the class='test' div at the same level so the test div can be absolute inside the wrapper and be always at a fixed position

<div id="wrapper">
    <div class="main">
        <div class="scroll-container">
          <div class="container">
            <div class="container2">
            </div>
          </div>
          <div class="test">Fixed inside scroll container</div>
        </div>
     </div>
</div>

CSS:

#wrapper {
position: relative;
width: 100%;
height: 100%;
color: #a3265e;
font-family: 'GillSans-SemiBold';
}
.main {
    border: 1px solid red;
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding-top: 380px;
}
.scroll-container{
    position: relative;
    height: 500px;
}
.container {
    border: 1px solid green;
    position: relative;
    /*width: 946px;*/
    height: 500px;
    margin: 0 auto;
    overflow: scroll;
}
.container2 {
    height: 1500px;
    margin: 0 auto;
}
.test {
  width: 500px;
  height: 200px;
  color: white;
  position: absolute;
  top:0;
  left: 50%;
  margin-left: -250px;
  background: black;
  z-index: 1;
}

    CSS Howto..

    How do I align an absolute position child element in the center of its parent div [duplicate]

    Adding some automatic versioning to CSS files. How come I'm not able to pull assembly info?

    How to use css in asp.net for web server control?

    How to edit horizantal drop down menu

    How to make a GWT-like CaptionPanel manually

    How to create responsive square

    How to build a responsive padding for list menus using CSS?

    How to interchange table cells using Pure CSS

    how to place the images exactly in menu position

    CSS: How to create buttons with reflected shine similar to iOS icons?

    How to construct multilevel menu using CSS only?

    Only partial image showing as my background image. How can I use CSS to get the full image as my background?

    How to click on and off submenu's using javascript

    how to have spacing html/css

    How do I style a specific select option in HTML

    How do I prevent this list from moving across the page?

    CSS - How to remove comments and make CSS one line

    How to make possible vertical scroll on popup and disable vertical scroll for page by using CSS?

    jQuery beginner: how to add css transition when using toggleClass(“open”)?

    how can resize the page? [closed]

    How specify two css classes: from property and conditional class

    how to apply the css style only to child

    How to determine if a device is in portrait or landscape mode using CSS

    How to get the child of a parent div element

    How to use absolute element when its closet ancestor is a float element?

    How to keep text aligned with the middle of a textarea?

    show/hide multiple text field based on radio selection html javascript

    How to use CSS in LWUIT framework?

    How to mix 100% height with a minimum height

    CSS: how to put one image and one block with two

    in one line not using float