fix div when window resize

Question

I have a div that has fixed position and bottom 0 to display at the bottom of the window.

My problem is when window resize, this div move to up and into other elements. For example when I open console box in chrome this div jump to other elements in facebook fix position such as friend list, when I open console box, element jump to up but hidden up element.

Please help me how I can fix div in window resize.

Answer 1

CSS Position Fixed:

Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and doesn't move when scrolled. When printing, position it at that fixed position on every page. Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the viewport. This is often used to create a floating element that stays in the same position even after scrolling the page. - by Mozilla MDN

In other words, When you use position: fixed; that takes elements out of the document's regular flow.

How I can fix div in Window Re-size?

Solution: There's no way to do it as you want using CSS. You must remove position: fixed; because when you set bottom: 0px with position: fixed; to your element then it doesn't matter that what is the size (vertical) of your browser or window because position: fixed; element will always appear on the bottom of the viewport screen at 0px.

Answer 2

您可以使用position: fixed或

`position:absolute`