Geek Answers Handbook

Position: fixed element should be wider than browser

Can someone tell me why position: fixed causes the element to be wider than the browser or other content on the page and causes horizontal scrolling?

Here is the HTML code

<header>
     this is a header
</header>

<div class="container">
     this is a container
</div>

CSS

 header {
      width: 90%;
      height: 100px;
      background: blue;
      position: fixed;
      z-index: 100;
 }

.container {
     width: 90%;
     height: 500px;
     background: red;
     position: relative;
     z-index: -2;
}

Here is the link on the code http://codepen.io/colbydodson/pen/wcgua

+9
source share
6 answers

This is due to the fact that the width is applied to the elements relativeand fixedin different ways, depending on the container marginand the inherited properties of the parent style - according to their properties position, for example (as you might imagine) width.

- , CSS, *{margin:0; padding:0;}
body 8 (http://www.w3.org/TR/CSS2/sample.html),

header , top, left, right bottom ->, / , 90% , 10px 'body'.

top:0; left:0; header http://jsbin.com/ETAqADu/1/edit

.container, DIV block, relative, 90% , body ( 10 + 10 ( X))

: header 20 , .container, body.

: (body) , 0

+10

. , , , , width: auto.

IE8 ,

width: 100vw

: vw, vh, vmin, vmax

+6

body .
:

body{
  margin: 0;
}
+1

position:fixed , / , . , div, reset body margin.

0

Salaw, body { margin: 0; } , <body> margin/padding ( ). position: fixed; , position: relative; - .

, width: 90% " 90% " , fixed , relative - , .

. http://codepen.io/anon/pen/exzpC

0

, , , . - - , width ( width: 750px), .

, - ? . - , . , , , - width , .

In this case, the solution is to either set this element to a smaller width, or to make it flexible .

0
source

More articles:


All Articles