How to positioning an element floating above his sibling element - html

Question

I use the span element as a button to open a sidebar, and I need to position it above the #conteudo element, hiding the orange background... I have been trying some things with no success...
#conteudo {
background-color: green;
height: 100px;
}
body {
height: auto !important;
}
#body {
background-color: orange;
border-left: 1px solid #738290;
border-right: 1px solid #738290;
}
#navSideBtn {
cursor: pointer;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 3px;
border-bottom: solid green 3px;
border-bottom-right-radius: 3px;
border-right: solid green 1px;
color: green;
background-color: whitesmoke;
font-size: 18px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="body" class="container-fluid text-justify">
<div class="row">
<span id="navSideBtn" data-toggle="tooltip" data-placement="right" class="glyphicon glyphicon-chevron-right"></span>
<section id="conteudo" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h2>lorem ipsum title</h2>
</section>
</div>
</div>

Answer 1

Set the .row to position:relative and then you can set the #navSideBtn to be position:absolute and use top/left to position it.
#conteudo {
background-color: green;
height: 100px;
}
body {
height: auto !important;
}
#body {
background-color: orange;
border-left: 1px solid #738290;
border-right: 1px solid #738290;
}
#navSideBtn {
cursor: pointer;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 3px;
border-bottom: solid green 3px;
border-bottom-right-radius: 3px;
border-right: solid green 1px;
color: green;
background-color: whitesmoke;
font-size: 18px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.row {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="body" class="container-fluid text-justify">
<div class="row">
<span id="navSideBtn" data-toggle="tooltip" data-placement="right" class="glyphicon glyphicon-chevron-right"></span>
<section id="conteudo" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h2>lorem ipsum title</h2>
</section>
</div>
</div>