Is it possible to generate a fixed div element that remains stationary and does not scroll along with the rest

Question

Is it possible to generate a fixed div element that remains stationary and does not scroll along with the rest

I'm uncertain if this is feasible:

My webpage consists of multiple stacked divs with content. I'd like to have a 100px tall image or background at the very bottom, beneath all the other divs. However, I want the browser to display scrollbars for navigating through the content, but not necessarily scrolling down to view the bottom image.

Is there a way to use CSS settings on that bottom image so the browser doesn't treat it as content? I'm unsure if this can be achieved.

Alternatively, I could include the image in the body's background, but then how can I ensure it always appears below the content divs, especially when their heights are variable due to changing content?

UPDATE

Check out this link for a visual representation of what I'm attempting: http://jsbin.com/ojejad/2/edit

When scrolling down, the green section shows up because it's considered part of the page content. Is there a way to make the browser disregard the green section so scrolling stops at the bottom of the blue div?

The purpose is to only display the green image at the bottom if the user's screen size allows them to see it without scrolling. If the monitor is too small, I don't want users to needlessly scroll down just to view the image since it's meant to be more of a background element rather than crucial content.

html css

Answer 1

Answer №1

For content to stay fixed on the screen, use the following CSS:

position:fixed;

Here is an example:

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

See a demo here: http://jsbin.com/owacaq/1/edit

Update:

If you want content to stick within its parent element, use the following CSS properties:

position:absolute;

for the child element to be stuck and

position:relative;

on the parent element.

Absolutely positioned elements are positioned relative to their closest ancestor with a position other than static.

Check out this example: http://jsbin.com/eceqeh/1/edit

Answer 2

For content to stay fixed on the screen, use the following CSS:

position:fixed;

Here is an example:

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

See a demo here: http://jsbin.com/owacaq/1/edit

Update:

If you want content to stick within its parent element, use the following CSS properties:

position:absolute;

for the child element to be stuck and

position:relative;

on the parent element.

Absolutely positioned elements are positioned relative to their closest ancestor with a position other than static.

Check out this example: http://jsbin.com/eceqeh/1/edit

Is it possible to generate a fixed div element that remains stationary and does not scroll along with the rest

Answer №1

Similar questions

Creating a Bootstrap layout with columns of varying heights

Trigger jQuery Dialog Box When Option is ChosenJust give me the signs, this

The matter at hand pertains to the aesthetics of formatting HTML components

CSS failing to acknowledge specified div background

Make all cells in bootstrap table appear in bold font

Passing string values to an onClick event listener in Javascript is similar to how it is done in an onclick event listener in HTML

Dealing with Overflow in CSS DIV Elements

Ember: Despite refreshing, certain attributes in the model remain unchanged

Inserting HTML form within an email message

What is the best way to access the overlay dropdown menu from outside a responsive table?

What Is The Process for Logging Into an ASPX Site with Jsoup?

What is the best way to generate a canvas above the footer using HTML and JavaScript?

How can you achieve three layers of nested quotes in Dynamic HTML?

Adding and adjusting the size of different DIV elements within a shared area

Struggling with image alignment in my CSS styling

Troubleshooting issue with jQuery animate not correctly scrolling

Tips for creating a continuous background that spans the entire website

Is there a way for me to determine when my web browser has completed loading the entire page?

Tips for finishing a row of images using CSS3

The intersection observer fails to detect any new elements or entries that are appended to the page after it has