Why Does Fixed Positioning Alter the Width of an Element

Why does fixed positioning alter the width of an element?

The body automatically has a margin of 8px. So when you set the width of your element to 100%, it becomes the width of the body, less 8px on both sides.

But when you give the element position:fixed, it no longer is set relative to the body but to the viewport, which doesn't have margins. So the width is now the width of the viewport, which is 2 * 8px wider - the 16px that you observe.

Here's the W3 documentation on the subject:

Whereas the position and dimensions of an element with position:absolute are relative to its containing block, the position and dimensions of an element with position:fixed are always relative to the initial containing block. This is normally the viewport: the browser window or the paper’s page box.

Why are my elements moving when changing position from fixed to static?

HTML elements are positioned static by default. No need to define that in your CSS, unless you are using a library/framework of some sorts that define the positioning on your element.

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.

This means that if you're setting left: 3%; and bottom: 93%;, the element will be positioned 97% to the left and 7% to the bottom (very close to the top) relative to the viewport - not its parent container, which in this case would be discord.

So unless you want the element to be there while you're scrolling the page, don't use position:fixed;. If you want your navbar to be set in place and stay there during scrolling, ONLY apply position: fixed; to the navbar's parent - the full container containing all your img-elements.

Codepen: https://codepen.io/sigurdmazanti/pen/wvpPJPz

Example snippet that has position:fixed; on its parent container:

body {
  height: 150vh;
  background-color: blue;
}

nav.fixed {
  width: 100%;
  position: fixed;
}

nav.static {
  width: 100%;
  padding-top: 100px;
}

ul {
  max-width: 50%;
  margin: 0 auto;
  list-style-type: none;
  display: flex;
  justify-content: space-between;
}

li {
  background-color: white;
}

<body>
  <nav class="fixed">
    <ul>
      <li>fixed</li>
      <li>fixed</li>
      <li>fixed</li>
    </ul>
  </nav>

  <nav class="static">
    <ul>
      <li>static</li>
      <li>static</li>
      <li>static</li>
    </ul>
  </nav>
</body>

position: fixed caused element to be wider than browser

Width is differently applied to relative and fixed elements, the ancestors margin and the style property that are parent-inheritable in respect to their position property.

The body tag will have it's default User Agent Style Sheet 8px margins (http://www.w3.org/TR/CSS2/sample.html),

header 90% width, being fixed, without any top, left, right or bottom value will be positioned to the nearest available place, but will inherit the original document/viewport size, making it in reality 90% wide, but positioned at the 10px 'body' margin offset.
To test add top:0; left:0; for the fixed header http://jsbin.com/ETAqADu/1/edit

.container being a block-level DIV element set to relative position, will be 90% width of the available parent usable width, which is the body innerWidth (not counting the 10 + 10 px margins on the X axis)

Unwanted result:

logically header will be 20px wider than .container because position fixed moves your element out of body flow.

Fix:

control your parent (body) element default margin by setting to 0

body { margin: 0; }

Or a small but heavy CSS reset like:

/* QuickReset */
*, *::before, *::after { margin: 0; box-sizing: border-box; }

Read also CSS Box Model - Margin collapsing

Fixed positioned element does not adapt to the width of the window/viewport

The main answer to your question is:

You can't scroll the whole page (with the navbar included) because you use position: fixed.

http://quirksmode.org/css/css2/position.html

An element with position: fixed is taken out of the normal flow of the
page and positioned at the desired coordinates relative to the browser
window. It remains at that position regardless of scrolling.

In your case, if you want to keep your navbar position:fixed, AND make all the navigation links accessible when you resize your window, I have a better suggestion:, change the width values that you've set in pixels into percentages and your elements will be fluid. Never use pixel width values if you want your layout to be fluid.

Here's the updated code: http://jsfiddle.net/httg1e2w/3/

PS: Important: you are using "navlink" multiple times in your HTML. IDs are supposed to be Unique. Use classes instead. This may create you headaches in older browsers.

<a href="..." class="navlink">link</a>

Set width of a Position: fixed div relative to parent div

I´m not sure as to what the second problem is (based on your edit), but if you apply width:inherit to all inner divs, it works: http://jsfiddle.net/4bGqF/9/

You might want to look into a javascript solution for browsers that you need to support and that don´t support width:inherit

Width changing when switching from static positioning, to fixed positioning

I have added position:sticky in both case. when its scroll or not. Pleas check below snippet its working fine.

var elementPosition = $('#navigation').offset();
$(window).scroll(function() {  if ($(window).scrollTop() > elementPosition.top) {    $('#navigation').css('position', 'sticky').css('top', '0');  } else {    $('#navigation').css('position', 'sticky');  }});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="container-fluid mt-4">  <div class="row">    <div class="col-3">      <div class="card" id="navigation">        <div class="card-body">          <h3>txgrgrgr</h3>          <p>Hello and welcome to the online booking page forthghfg.</p>          <hr>          <h4 class="mt-4">Contact</h4>          <p><a href="">thghshg.co.uk</a></p>          <p><a href="">0123464</a></p>          <hr>          <h4 class="mt-4">Address</h4>          <p>2064 Ballard Str<br> Texas<br>Lincolnshire<br> LN4 1TJ</p>          <hr>          <h4 class="mt-4">Opening Times</h4>          <p>2064 Ballard Str<br> Texas<br>Lincolnshire<br> LN4 1TJ</p>        </div>      </div>    </div>
    <div class="col-9" style="margin-bottom:1000px;">      <div class="card">        <div class="card-body text-center">          <h2 class="mb-4 pb-4 pt-4">Schedule with a team member</h2>          <div class="row">            <div class="col-3 mb-3">              <div class="card h-100">                <img class="card-img-top" style="max-height: 200px;" src="https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Card image cap">                <div class="card-body">                  <p class="card-text"><strong>Terry Logan</strong><br> Massage Therapist</p>                  <a class="btn btn-success btn-block">Schedule Appointment</a>                </div>              </div>            </div>            <div class="col-3 mb-3">              <div class="card h-100">                <img class="card-img-top" style="max-height: 200px;" src="https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Card image cap">                <div class="card-body">                  <p class="card-text"><strong>Terry Logan</strong><br> Massage Therapist</p>                  <a class="btn btn-success btn-block">Schedule Appointment</a>                </div>              </div>            </div>

Width of element with fixed position Bootstrap

Your problem was in your first_topCSS.

http://jsfiddle.net/gespinha/nWHSH/6/

This should solve your problem, just change your CSS to:

.first_top {
    position: fixed;
    top: 0;
    background: #FFF;
    z-index: 2;
    left: 0;
    right: 0;
    max-width: 720px;
    margin: 0 auto;
}

The problem was about the fixed positioning. Fixed and absolute positioned elements are detached from the actual document flow, so they tend to not react with other elements naturally, they interact with the document it self.

So in order to force the order within the flow, you have to guide that sam element and make him follow a flow that is not the main one, but is similar, giving the user the idea that it is really being manipulated by the interaction with the other objects in the DOM.

Why Does Fixed Positioning Alter the Width of an Element