Can't succeed in a child overlapping its parent

In this scenario https://jsfiddle.net/naufragio/fqq93gsh/2/ I would like the first button on the left (Sections) to overlap the navigation bar.

In other words I would like that button to be completely visible, in this way it should slightly come out from the navigation bar. In the current situation the extreme left part of the button is not visible as you can see.

I tried with Z index but I think that it’s not working due to the parent-child relation. Can you suggest me other strategies please?

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.container {
  margin: 0 auto;
  width: 80%;
}

body {
  margin: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 80%;
  /*QUA CERA 100% E NON ANDAVA BENE. XKE? XKE QUANDO ES FIXED THEN THE width reference to the document and not his parent. QUINDI FACEVA RIFERIMENTO AL 100% DEL DOCUMENTO, NON DEL PADRE (CONTAINER). QUINDI METENDOLA A 80% GLI DICIAMO DI PRENDERE L'80% DEL TOTALE, DEL DOCUMENTO, CHE E' QUELLO CHE VOLGIAMO PER LA NOSTRA UL*/
}

li {
  float: left;
  font-weight: bold;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.imgheader {
  text-align: center;
  padding-top: 0.5%;
}

.navheader {
  border: 1px solid rgba(0, 0, 0, 0.3);
  height: 50px;
}

.buttonheader1 {
  margin: 10px;
  padding: 8px 10px;
  background-color: #6288A5;
  border: 1px solid #4D7B9F;
  border-radius: 3px;
  color: #fff;
  margin-right: 80px;
  clear: both;
}

.buttonheader2 {
  margin: 10px;
  padding: 8px 10px;
  background-color: #6288A5;
  border: 1px solid #4D7B9F;
  border-radius: 3px;
  color: #fff;
  clear: both;
}

.buttonleft {
  margin: 10px;
  padding: 8px 10px;
  background-color: white;
  border: 1px solid #4D7B9F;
  border-radius: 3px;
  color: black;
  font-weight: bold;
  position: relative;
  right: 20%;
}
<div class="container">
  <div class="nav">
    <div class="navheader">
      <div class="leftheader">
        <ul>
          <li style="float:left"><button class="buttonleft" type="button">SECTIONS</button></li>
          <li style="float:left"><a target="_blank" rel="nofollow" href="#home">HOME</a></li>
          <li style="float:left"><a target="_blank" rel="nofollow" href="#news">SEARCH</a></li>
        </ul>
      </div>
      <div class="rightheader">
        <ul>
          <li style="float:right"><button class="buttonheader1" type="button">LOG IN</button></li>
          <li style="float:right"><button class="buttonheader2" type="button">SUBSCRIBE</button></li>
        </ul>
      </div>
      <div class="imgheader">
        <img src="logo.png" alt="logo">
      </div>
    </div>
    <div class="navarticles">
    </div>
  </div>
  <div class="content">
  </div>
  <div class="footer">
  </div>
</div>



You need to remove the overflow: hidden; from the parent element(ul).

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;

}

.container {

	
	margin:0 auto;
	width:80%;
	
}

body {margin:0;}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    //overflow: hidden;
    position: fixed;
    top: 0;
    width: 80%; /*QUA CERA 100% E NON ANDAVA BENE. XKE? XKE QUANDO ES FIXED THEN THE width reference to the document and not his parent. QUINDI FACEVA RIFERIMENTO AL 100% DEL DOCUMENTO, NON DEL PADRE (CONTAINER). QUINDI METENDOLA A 80% GLI DICIAMO DI PRENDERE L'80% DEL TOTALE, DEL DOCUMENTO, CHE E' QUELLO CHE VOLGIAMO PER LA NOSTRA UL*/
}



li {

    float: left;
    font-weight: bold;
    

}

li a {
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.imgheader {
	
    
    text-align: center;
    padding-top: 0.5%;
    
}

.navheader{
	
    
    border: 1px solid rgba(0, 0, 0, 0.3);
    height: 50px;


    
}

.buttonheader1 {
	

    margin: 10px;
    padding: 8px 10px;
    background-color: #6288A5;
    border: 1px solid #4D7B9F;
    border-radius: 3px;
    color: #fff ;
    margin-right: 80px;
    clear:both;
    
}

.buttonheader2 {
	
    
    margin: 10px;
    padding: 8px 10px;
    background-color: #6288A5;
    border: 1px solid #4D7B9F;
    border-radius: 3px;
    color: #fff ;
    clear:both;

    
}

.buttonleft{
	
    
    margin: 10px;
    padding: 8px 10px;
    background-color: white;
    border: 1px solid #4D7B9F;
    border-radius: 3px;
    color: black;
	font-weight: bold;
	position:relative;
	right:20%;
	

    
}
 <body>
    <div class="container">
      <div class="nav"> 
      	<div class = "navheader">
      		<div class="leftheader">
      	  		<ul>
      	  			<li style="float:left"><button class="buttonleft" type="button">SECTIONS</button></li>
      	   			<li style="float:left"><a target="_blank" rel="nofollow" href="#home">HOME</a></li>
      	    		<li style="float:left"><a target="_blank" rel="nofollow" href="#news">SEARCH</a></li>
				</ul>
			</div>
			<div class="rightheader">
				<ul>
					 <li style="float:right"><button class="buttonheader1" type="button">LOG IN</button></li>
					 <li style="float:right"><button class="buttonheader2"  type="button">SUBSCRIBE</button></li>
      	    	</ul>
			</div>			
      	    <div class="imgheader">
      	  		<img src="logo.png" alt="logo">
      	  	</div>
      	</div>
      	<div class="navarticles">
      	</div>
      </div>
      <div class="content">
      </div>
      <div class="footer">
      </div>
    </div>
  </body>

You need to set your overflow property of the ul element to visible.
See this fiddle