如何定位浮动在其兄弟元素上方的元素

Question

我使用span元素作为按钮来打开侧边栏，我需要将它放在#conteudo元素上方，隐藏橙色背景......我一直在尝试一些没有成功的事情......

#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

将.row设置为position:relative然后您可以将#navSideBtn设置为position:absolute并使用top / left进行定位

#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>