CODEWITHSUNDEEP
csshtml
soniccool
soniccool

Reputation: 6058

Force div element to stay in same place, when page is scrolled

I created a div element, that I placed all the way on the right of my site. The only problem is that its at the top of the site, so if i scroll down it remains there.

How can I force it to remain in the same part of the page, when page is being scrolled?

This is, what I've managed to figure out myself so far:

<div style="width: 200px; background-color: #999; z-index: 10; position: absolute; right: 0; top: 0; height: 83px;">
</div>

Upvotes: 48

Views: 177813

Answers (6)

wassim nassour
wassim nassour

Reputation: 1

i my case the blue line I want it to stay fixed, i used sticky with right 0 and left 0

enter image description here

Upvotes: 0

Phani Bitla
Phani Bitla

Reputation: 21

  1. You can use position : absolute and adjust the alignment using css parameters like below.
.dvfixed{
  position: absolute;
  left: 100px;
  right: 10px;
  bottom: 5px;
  top: 5px;
}

OR

  1. you can use float like below.
.dvfloat{
  float:right;
}

Upvotes: 2

Debu Shinobi
Debu Shinobi

Reputation: 2572

There is something wrong with your code.

position : absolute makes the element on top irrespective of other elements in the same page. But the position not relative to the scroll

This can be solved with position : fixed This property will make the element position fixed and still relative to the scroll.

Or

You can check it out Here

Upvotes: 4

SOULAT TOQEER
SOULAT TOQEER

Reputation: 101

You can do this replacing position:absolute; by position:fixed;.

Upvotes: 10

Anton D
Anton D

Reputation: 1366

Change position:absolute to position:fixed;.

Example can be found in this jsFiddle.

Upvotes: 96

user2769260
user2769260

Reputation: 111

Use position: fixed instead of position: absolute.

See here.

Upvotes: 11

Related Questions