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?

回答1:

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/

回答2:

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).

来源：https://stackoverflow.com/questions/15650056/fixed-position-in-responsive-design