CODEWITHSUNDEEP
cssscrollresponsive-designcss-position
User_coder
User_coder

Reputation: 516

Fixed Position in responsive design

I am using responsive framework 1140px. In the mobile version I have to fix the position of a logo but not have it overlap the content on scroll. Basically fix the position but don't fix the image on scroll, can this be achieved?

Upvotes: 2

Views: 32984

Answers (2)

Bernie
Bernie

Reputation: 1489

It appears that you want is position: absolute, the difference being that absolute images do not move while scrolling.
http://www.impressivewebs.com/absolute-position-css/

It's worth taking a look at this link in order to see the differences between relative, absolute, and fixed positioning:
http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Upvotes: 4

Daniel Imms
Daniel Imms

Reputation: 50149

You want to use position:absolute

  • position:fixed fixes the element to the screen, so it will not move when you scroll (it's fixed to the window).

  • position:absolute fixes the element based on the closest ancestor that is not position:static, so it will move when you scroll the page (it's fixed to the page).

Upvotes: 7

Related Questions