1
in diesem Szenario https://jsfiddle.net/naufragio/fqq93gsh/2/ Ich möchte die erste Schaltfläche auf der linken Seite (Abschnitte), um die Navigationsleiste zu überlappen.In einem Kind, das seine Eltern überlappt
Mit anderen Worten möchte ich, dass die Schaltfläche vollständig sichtbar ist, auf diese Weise sollte es leicht aus der Navigationsleiste kommen. In der aktuellen Situation ist der äußerste linke Teil der Schaltfläche nicht sichtbar, wie Sie sehen können.
Ich versuchte mit Z-Index, aber ich denke, dass es wegen der Eltern-Kind-Beziehung nicht funktioniert. Können Sie mir bitte andere Strategien vorschlagen?
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 href="#home">HOME</a></li>
<li style="float:left"><a 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>