## ЗАКЛЮЧИТЕЛЬНЫЙ ОТВЕТ ##
изменить упаковщики z-index
.wrapper{
width: 100vw;
background-color:yellow;
z-index: -10;
position: absolute;
margin: 0 auto;
height: 120px;
color: white;
padding: 0;
}
body {
background-color:#000;
overflow:hidden;
font-family: Georgia, "Times New Roman", serif;
font-family: helvetica, sans-serif;
margin: 0;
padding: 0;
}
@media only screen and (max-width: 711px) {
.linkwrapm{
background-color:#fff;
height:50px;
margin-top: -16;
width:100%;
text-align:left;
padding-top:11px;
}
.centerm{
position: absolute;
left: 45%;
top: 14%;;
}
.bannerm{
background-color:#fff;
height:58px;
padding-top: 9px;
padding-bottom:19px;
background-size: 300px 60px;
background-repeat: no-repeat;
}
.navbartextm{
background-color:#fff;
color:grey;
font-size:27px;
text-align:left;
padding-left:12px;
font-weight: bold;
}
/* mobile menu*/
.navm{
padding-left:45px;
font-weight: bold;
text-align:left;
margin:0;
padding-top:8px;
padding-bottom:9px;
background-color:#eeeeee;
color:black;
font-size:20px;
}
/*Func*/
.multi-level, .item ul, .nav input[type="checkbox"] {
display: none;
}
#menu:checked ~ .multi-level, .item input:checked ~ ul {
display: block;
}
/*Arrow*/
.arrow {
width: 12px;
height: 12px;
vertical-align: middle;
float: left;
z-index: 0;
margin: 17px 1em 0 2em;
}
.item input + .arrow {
transform: rotate(-810deg); /*default 90deg*/
transition: 0.4s; /*Default 2s*/
}
.item input:checked + .arrow {
transform: rotate(0deg);
transition: 0.2s;
}
/*Styles*/
label:hover {
cursor: pointer;
color:black;
font-size:20px;
}
label {
width: 100%;
display: block;
z-index: 3;
position: relative;
font-size:20px;
}
.nav {
width: 68%;
background-color: white;
overflow-x: hidden;
}
#nav-icon {
font-size: 45px;
line-height: 50px;
padding-left: 2em;
color: black;
background-color: #fff;
}
#nav-icon:hover {
color: #A9A9A9;
}
.nav ul, .nav li, label {
line-height: 40px;
margin: 0;
padding: 0 -1em;
list-style: none;
text-decoration: none;
color: #A9A9A9;
font-weight: 100;
width: 100%;
}
.item ul {
padding: 0 0.25em;
border-bottom:1px solid gray;
}
.nav li a {
line-height: 50px;
margin: 0;
padding: 0 4em;
list-style: none;
text-decoration: none;
color: #000000;
font-weight: 100;
}
.nav li a:hover{
color: #A9A9A9;
}
/* mobile menu end*/
.banner {
display: none !important;
}
/* Full Dropdown Hide */
.dropdown {
display: none !important;
}
.dd-button {
display: none !important;
}
.dd-button:after {
display: none !important;
}
.dd-button:hover {
display: none !important;
}
.dd-input {
display: none !important;
}
.dd-menu {
display: none !important;
}
.dd-input + .dd-menu {
display: none !important;
}
.dd-input:checked + .dd-menu {
display: none !important;
}
.dd-menu li {
display: none !important;
}
.dd-menu li:hover {
display: none !important;
}
.dd-menu li a {
display: none !important;
}
.dd-menu li.divider{
display: none !important;
}
/* Full Dropdown Hide End */
}
@media only screen and (min-width: 712px) {
.linkwrapm{
display: none !important;
}
.bannerm{
display: none !important;
}
.linkwrap{
background-color:#fff;
height:50px;
margin-top: -20px;
width:100%;
text-align:left;
padding-top:10px;
}
.banner{
background-color:#fff;
height:60px;
padding-top: 15px;
padding-bottom:20px;
}
/* Full Navigation*/
a {
text-decoration: none;
color: #000000;
}
a:hover {
color: #222222;
}
/* Dropdown */
.dropdown {
display: inline-block;
position: relative;
margin-left:10;
}
.dd-button {
display: inline-block;
border: 1px solid gray;
border-radius: 4px;
padding: 10px 30px 10px 20px;
background-color: #ffffff;
cursor: pointer;
white-space: nowrap;
}
.dd-button:after {
content: '';
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid black;
}
.dd-button:hover {
background-color: #eeeeee;
}
.dd-input {
display: none;
}
.dd-menu {
position: absolute;
top: 100%;
border: 1px solid #ccc;
border-radius: 4px;
padding: 0;
margin: 2px 0 0 0;
box-shadow: 0 0 6px 0 rgba(0,0,0,0.1);
background-color: #ffffff;
list-style-type: none;
}
.dd-input + .dd-menu {
display: none;
}
.dd-input:checked + .dd-menu {
display: block;
}
.dd-menu li {
padding: 10px 20px;
cursor: pointer;
white-space: nowrap;
}
.dd-menu li:hover {
background-color: #f6f6f6;
}
.dd-menu li a {
display: block;
margin: -10px -20px;
padding: 10px 20px;
}
.dd-menu li.divider{
padding: 0;
border-bottom: 1px solid #cccccc;
}
/* Full Navigation*/
}
/* CONTENT*/
.wrapper{
width: 100vw;
background-color:yellow;
z-index: -10;
position: absolute;
margin: 0 auto;
height: 120px;
color: white;
padding: 0;
}
.content {
background-color:yellow;
width:23px;
clear:both;
}
/* CONTENT*/
<link rel="stylesheet" href="master.css">
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src"script.js"> </script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="banner">
<img border="0" alt="" src="placeholder.png" width="300" height="60" align="left" hspace="20">
</div>
<div class="bannerm">
<img border="0" alt="" src="placeholder.png" width="300" height="60" align="left" hspace="20">
</div>
<div class="linkwrapm">
<div class="nav">
<input type="checkbox" id="menu"/>
<label for="menu" id="nav-icon">☰</label>
<div class="multi-level">
<div class="item">
<br>
<div class="navm">Navigation </div><BR>
<input type="checkbox" id="A"/>
<img src="images/Arrow.png" class="arrow"><label for="A">Services</label>
<ul>
<li><a href="#">Branding</a></li>
<li><a href="#">Web/App Development</a></li>
<li><a href="#">Internet Marketing and SEO</a></li>
</ul>
</div>
<div class="item">
<input type="checkbox" id="B"/>
<img src="images/Arrow.png" class="arrow"><label for="B">Jobs</label>
<ul>
<li><div class="sub-item">
<input type="checkbox" id="B-A"/>
</div></li>
<li><div class="sub-item">
<input type="checkbox" id="B-B"/>
</div></li>
<li><a href="#">Graphic Designer</a></li>
<li><a href="#">Logo Designer</a></li>
</ul>
</div>
<div class="item">
<input type="checkbox" id="C"/>
<img src="images/Arrow.png" class="arrow"><label for="C">About Us</label>
<ul>
<li><a href="#">Our Team</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Our Work</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="linkwrap">
<label class="dropdown">
<div class="dd-button">
Dropdown
</div>
<input type="checkbox" class="dd-input" id="test">
<ul class="dd-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>
<a href="linkhere">Link to Rane.io</a>
</li>
</ul>
</label>
<label class="dropdown">
<div class="dd-button">
Dropdown
</div>
<input type="checkbox" class="dd-input" id="test">
<ul class="dd-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>
<a href="linkhere">Link to Rane.io</a>
</li>
</ul>
</label>
<label class="dropdown">
<div class="dd-button">
Dropdown
</div>
<input type="checkbox" class="dd-input" id="test">
<ul class="dd-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>
<a href="linkhere">Link to Rane.io</a>
</li>
</ul>
</label>
<label class="dropdown">
<div class="dd-button">
Dropdown
</div>
<input type="checkbox" class="dd-input" id="test">
<ul class="dd-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>
<a href="linkhere">Link to Rane.io</a>
</li>
</ul>
</label>
<label class="dropdown">
<div class="dd-button">
Dropdown
</div>
<input type="checkbox" class="dd-input" id="test">
<ul class="dd-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>
<a href="linkhere">Link to Rane.io</a>
</li>
</ul>
</label>
</div>
<div class="wrapper">
hi
</div>
<div class="content">
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
СТАРЫЙ ОТВЕТ
Код невероятно сложен для понимания, а наименование классов и идентификаторов делает его очень сложным иметь смысл чего-либо. Кроме того, вы не предоставили много информации о том, какие классы и / или идентификаторы вы хотите изменить, что еще больше усложняет задачу.
Я также упомяну, что ваш подход к адаптивному дизайну очень неортодоксален.
Тем не менее, я думаю, что я понял это.
Итак, допустим, что это обертка , которую вы хотите за вашей верхней строкой
.wrapper{
width: 100vw;
height: 120px;
position: absolute;
margin-top: -120px;
color: white;
}
Установите абсолютное положение и сделайте маржу -top: -высота элемента
теперь он блокирует все, и вы хотели, чтобы он был позади. чтобы получить эту функциональность, вы должны переместить разделение с помощью оболочки класса наверх.
<body>
<div class="wrapper">
hi
</div>
Теперь оно должно быть там, где вы хотите. но теперь вы не можете видеть это. теперь, если вы хотите, чтобы он был видимым, вы должны установить цвет фона на что-то прозрачное, например, используя RGBA
background-color:rgb(255, 255, 255, .0);
, который должен это сделать. работал для меня!
СТАРЫЕ ОБНОВЛЕНИЯ
вот пример белого div, перекрывающего синий
body {
background: #333;
}
.header {
border: 25px solid red;
height: 30vh;
background: rgba(0, 0, 255, .75); /*blue*/
}
.wrapper {
border: 25px solid lime;
height: 30vh;
background: rgba(255, 255, 255, .75); /*white*/
margin-top: -15vh; /* half way overlapping*/
}
<body>
<div class="header">
</div>
<div class="wrapper">
</div>
</body>
Теперь обратите внимание, что происходит, когда я перемещаю теги html там, где обертка находится сверху, а не в заголовке!
body {
background: #333;
}
.header {
border: 25px solid red;
height: 30vh;
background: rgba(0, 0, 255, .5); /*blue*/
margin-top: -15vh; /* half way overlapping*/
}
.wrapper {
border: 25px solid lime;
height: 30vh;
background: rgba(255, 255, 255, .5); /*white*/
}
<body>
<div class="wrapper">
</div>
<div class="header">
</div>
</body>
Обратите внимание, как я также меняю место с верхом поля с .wrapper на .header