CODEWITHSUNDEEP
htmlscroll
user2629376
user2629376

Reputation: 251

How to make a div not move when scrolling?

I have created this div on the top left of my website, which contains the logo. However, I want it to stay there and not move up and down when I am scrolling. Please advise.

<div style="padding: 5px 0 0 5px; height: 140px; width: 150px;">
   <p align="left">
      <img src="images/logo.png" border="5" alt="Logo" />
   </p>
</div>

Thanks

Upvotes: 25

Views: 138814

Answers (3)

PJM257
PJM257

Reputation: 1

Add an id to your div like this:

<div style="padding: 5px 0 0 5px; height: 140px; width: 
150px;"id="idOfDiv">
<p align="left"><img src="images/logo.png" border="5" alt="Logo" />
</p>
</div>

Add to CSS:

#idOfDiv {position:fixed;}

Now, it should not scroll with the rest of the page or the parent element.

Example in jsfiddle: https://jsfiddle.net/PJM257/pL1s6jpz/

Upvotes: -2

Zaheer Ahmed
Zaheer Ahmed

Reputation: 28538

position:fixed; An element with fixed position is positioned relative to the browser window. It will not move even if the window is scrolled.

so change your css:

<div style="position : fixed; padding: 5px 0 0 5px; height: 140px; width: 150px;">

Upvotes: 22

Natesan
Natesan

Reputation: 1145

<div style="padding: 5px 0 0 5px; height: 140px; width: 150px;position:fixed;left:0;top:0">

for ref: http://www.w3schools.com/css/css_positioning.asp

Upvotes: 31

Related Questions