Can you create div that doesn't scroll as page content

Question

I'm not sure if this is possible or not: I have a webpage with several div's of content on it, stacked one on top of the other. At the bottom, of all the content div's, I want there to be a 100px tall image (or maybe it's a DIV with a `background-image`). When you view this page, the browser creates scrollbars so that you can scroll down the content but also so you can scroll the bottom div/image into view. Are there CSS settings I can use on that bottom div/image so that the browser basically ignores it as content? So that the browser doesn't try to scroll down to it? I can't figure out if this is possible or not. Alternatively, I can make the image part of the `<body>` background, but then how do I force this image to show up exactly below my content div's? When you change the window size, the height of my content div's change, due to changing content inside of them. So I'm not sure how you can always ensure this bottom image shows up exactly after the last content div if it's a bac…

Accepted Answer

If you want something to stick to the screen use

```
position:fixed;
```

Like so:

```
div {
  background-color:blue;
  height:200px;
  width:200px;
  position:fixed;
  bottom:0;
}
```

Demo: http://jsbin.com/owacaq/1/edit

Edit:

If you want something to stick to its parent use

```
position:absolute;
```

On the to be sticked element and

```
position:relative;
```

On the parent.

Position absolute doesn't respect anything except the next parent with position other than static.

Example

http://jsbin.com/eceqeh/1/edit

Can you create div that doesn't scroll as page content

Solution

Problem

Related problems