Q: why header come down when constant or fixed button add .? I have one button which should be remain contant or fixed in same position  in all views .But when I added a view , its header comes down below the button
why ?
when I remove this    <button>Add</button> it come in correct position (in middile of page).
<!DOCTYPE html>
<html ng-app="app">

  <head>
    <link data-require="bootstrap-css@3.x" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js" data-semver="1.2.17" data-require="angular.js@1.2.17"></script>
    <script src="http://code.angularjs.org/1.2.17/angular-route.js" data-semver="1.2.17" data-require="angular-route@1.2.17"></script>
    <script data-require="ui-bootstrap@0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
    <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/foundation/5.0.0/css/foundation.min.css" />
    <script src="script.js"></script>
    <script src="logincontroller.js"></script>
  </head>

  <body>
   <button>Add</button>
   <div id="main">
<div ng-view></div>
    <!-- angular templating -->
    <!-- this is where content will be injected -->

</div>
  </body>

</html>

Plunker
http://plnkr.co/edit/j4i7omuhNyEIzAaYgmhv?p=preview

A: Its because of <h1> and <div> when defined will be displayed as two rows unless otherwise you have overridden by using some css 
Take a look at this
Working Demo
  <div class="container">
    <div class="div1">
      <button>Add</button>
    </div>
    <div class="div2">
      <div id="main">
        <div ng-view></div>
      </div>
    </div>
  </div>


A: Both h1- and button-elements have the css-property display block. Therefore they will be placed beneath each other. http://www.w3schools.com/cssref/pr_class_display.asp
