Form goes below the header bar


#1

Hi, im beginning to code with javascript, css, html and i was editing a index.html file to build a form with a simple login, but the moment i had the ionic css classes the form goes below the header, if i remove the “bar” css its stays all good but it removes the color of the bar, any hint?

<html><head>
  <meta charset="utf8">
  <meta name="viewport" content="width=device-width">
  <title>Gestor de Mesas</title>

  <link rel="stylesheet" href="/components/ionic/css/ionic.min.css">
  <link rel="stylesheet" href="/stylesheets/application.css">

  <script src="/javascripts/onerror.js"></script>
  <script src="/javascripts/console.log.js"></script>

  <!-- cordova.js is served from localhost to ensure the correct version -->
  <script src="http://localhost/cordova.js"></script>
  <script src="/components/steroids-js/steroids.js"></script>

  <script src="/javascripts/application.js"></script>
</head>
<body class="content">
  <div class="padding">
    <div class="bar bar-header bar-positive">
	<h1 class="title">Login</h1>
</div>
<div class="list">
  <label class="item item-input">
    <span class="input-label">Username</span>
    <input type="text">
  </label>
  <label class="item item-input">
    <span class="input-label">Password</span>
    <input type="password">
  </label>
</div>
<button class="button button-positive">Login
</button> 
</div>
</body>
</html>

#2

To have this work the right way i had to add the style with “position:relative” otherwise i keeps throwing the form under the header.