How do I keep the site elements in the same place all the time?

Question

I have the following HTML code:

<div id="geral">

<p class="texto_grande_titulo">...</p> 
                          ...
 </div>

In the CSS:

div#geral{ background-image:url(../imagens/borda.png);
    background-repeat:no-repeat;
    width: 802px;
    height: 719px;
    margin:auto;
    margin-top: 160px;
    }

And I want to know how I can get this div to stay stationary in the same place so that when I scroll down the div doesn’t track.Like the stack site, you may notice that by zooming in or zooming out all the elements of the page are in the same place, which is not the case on my site, how best to do this without using bootstrap?

Answer 1

div#geral{ background-image:url('http://kithomepage.com/images/Imagem003.jpg');
    background-repeat:no-repeat;
    width: 802px;
    height: 719px;
    position:fixed; 
    top:100px;
    left:0
}

<div id="geral">

<p class="texto_grande_titulo">TextoParagrafo TextoParagrafo TextoParagrafo TextoParagrafo TextoParagrafo</p> 
                          TextoDiv TextoDiv TextoDiv TextoDiv 
 </div>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>

The position: Fixed; will fix the position of the element in the coordinate you set. As the page is scrolled, the element remains fixed at the position you set and the page content normally scrolls.

The position of an element with fixed positioning (position: Fixed;) is defined in relation to the "viewport", that is, the browser window itself. When we scroll the page, the "viewport" does not change, so the element will stay exactly where it is.

The value Fixed in the position attribute works in all browsers, but in the case of Internet Explorer only works in version 7 and higher.

To make it work you have to declare a DOCTYPE!.

Mobile browsers have an unstable support to fix. Read more about the situation (English) http://bradfrost.com/blog/mobile/fixed-position/.