Positioning relative

by Timothy Lucas

HTML

<script src="http://ol3js.org/en/master/build/ol.js"></script>
<link rel="stylesheet" href="http://ol3js.org/en/master/css/ol.css">
<script src="https://rawgit.com/Turbo87/sidebar-v2/gh-pages/js/jquery-sidebar.js"></script>
<link rel="stylesheet" href="https://rawgit.com/Turbo87/sidebar-v2/gh-pages/css/ol3-sidebar.css">
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
    </div>
  </div>
</nav>
<div class="container-map-sidebar">
    <div id="sidebar" class="sidebar collapsed">
        <!-- Nav tabs -->
        <ul class="sidebar-tabs" role="tablist">
            <li><a href="#home" role="tab"><i class="fa fa-bars"></i></a></li>
            <li><a href="#profile" role="tab"><i class="fa fa-user"></i></a></li>
            <li><a href="#messages" role="tab"><i class="fa fa-envelope"></i></a></li>
            <li><a href="#settings" role="tab"><i class="fa fa-gear"></i></a></li>
        </ul>

        <!-- Tab panes -->
        <div class="sidebar-content active">
            <div class="sidebar-pane" id="home">
                <h1>sidebar-v2</h1>

                <p>A responsive sidebar for mapping libraries like <a href="http://leafletjs.com/">Leaflet</a> or <a href="http://openlayers.org/">OpenLayers</a>.</p>

                <p class="lorem">Content 1</p>

                <p class="lorem">Content 2</p>

                <p class="lorem">Concent 3</p>

                <p class="lorem">Content 4</p>
            </div>
            <div class="sidebar-pane" id="profile"><h1>Profile</h1></div>
            <div class="sidebar-pane" id="messages"><h1>Messages</h1></div>
            <div class="sidebar-pane"...

CSS

.container-map-sidebar{
    width : 100%;
    height: auto;
    position: relative; 
}

#map {
    position: relative;
}

.sidebar {
  position: absolute;
  right: 0;
}

JavaScript

var Alkmaar = ol.proj.transform([4.75355239868168, 52.62976657605367], 'EPSG:4326', 'EPSG:3857');

var view = new ol.View({
    center: Alkmaar,
    zoom: 17,
    projection: projection
});

var map = new ol.Map({
    target: 'map',
    view: view
});

var sidebar = $('#sidebar').sidebar();