Question

在使用忘记添加x属性的z-index之前，我犯了错误。我的display汉堡图标并未显示所有其他元素。

我已将#brgr设置为100，高于任何其他元素。

我的标题怎么样？

＆＃13;

z-index

＆＃13;

// Navigation
function initNav() {
	// Main
	const $menuTrigger = $('button#brgr');
	const $menuArea = $('#menu');
	// Content
		var $menuExpanded = false;
		 $menuTrigger.on('click', function(){
			if (!$menuExpanded) {
				$menuArea.addClass('is-out');
					$menuExpanded = true;
			} else {
				$menuArea.removeClass('is-out');
					$menuExpanded = false	
			}
		});
}
    
$(document).ready(function() {

initNav();

});

＆＃13;

button {
  background: 0;
  border: 0;
  cursor: pointer;
}

#menu {
  position:fixed;
  width:calc( 100vw - 59.3%);
  right:calc( -100vw - -59.3%);
  top:0;
  bottom: 0;
  background: blue;
  transition: 200ms all ease;
  z-index:10;
}

#menu.is-out {
  right: 0
}

header {
  width: 100%;
  padding: 40px 0 20px;
  background: #fff;
  position: fixed;
  z-index: 9;
} 

header a.logo {
  max-width: 175px;
  position: relative;
  float: left;
}

header #brgr {
  width: 35px;
  height: auto;
  float: right;
  position: relative;
  z-index: 100;
}

header #brgr span {
  display: block;
  background: #2d2d2d;
  height: 2px;
  margin-bottom: 4px;
  width: auto;
}

header #brgr:hover span {
  background: grey
}

header .wrapper {
  padding-left: 30px;
  padding-right: 30px
}

＆＃13;

Answer 1

将[[253, 146], [3, 845], [-841, 337], [-34, -876], [-522, -465], [-596, -570], [-917, 544], [715, 372], [573, -744], [731, -190], [133, -548], [-960, -189], [-266, -253], [-162, 954], [-293, 993], [-552, -942], [-107, 864], [-38, 257], [875, 552], [-205, -943], [1000, -491], [-353, -465], [-137, -995], [449, 175], [53, 106], [-184, -35], [-353, 450], [778, 605], [386, -466], [709, 642], [639, 193], [-749, 156], [187, -421], [-684, -968], [376, -143], [-674, 150], [-255, -667], [147, -42], [675, -163], [-275, -706], [971, -180], [660, 685], [-478, 774], [2, -45], [-12, -938], [383, -217], [119, 464], [257, -915], [149, -969], [681, -727], [-94, 404], [-708, 674], [-811, 202], [-665, -22], [898, 632], [-41, -520], [512, 828], [239, -628], [724, 698], [525, 951], [555, 145], [578, -580], [-194, -747], [-38, -735], [-735, 625], [321, 741], [-500, -988], [922, 964], [990, 25], [-667, 695], [-494, -405], [-748, -668], [-24, -444], [-589, -888], [-69, 884], [801, 77], [-142, 37], [782, 484], [-584, -411], [330, -496], [620, 888], [-65, 630], [-374, -971], [-846, -632], [179, -393], [40, -379], [-771, 229], [-38, 697], [-441, -504], [-262, 622], [-259, -13], [796, 828], [-130, -536], [-260, 430], [920, -212], [-457, -991], [-892, -510], [-115, 915], [275, 20], [761, -580], [-934, 494], [775, -486], [-202, 251], [-991, 525], [548, 338], [-139, 215], [626, -742], [-302, -6], [297, 951], [-119, -559], [711, 138], [670, 286], [83, -981], [976, -399], [-842, 468], [-310, 830], [-511, -148], [832, -556], [-316, -13], [-184, 192], [586, 377], [646, -605], [-544, 907], [-156, -340], [-426, -782], [-424, 2], [-395, -144], [-316, 760], [755, 992], [856, 86], [925, 985], [643, 273], [761, 918], [-254, 228], [631, 307], [-151, 142], [-135, -622], [-970, 593], [130, 853], [-137, -30], [-267, 547], [-838, -162], [-267, 938], [112, -849], [732, -896], [-20, -918], [-924, -95], [542, -488], [-402, 11], [-232, -162], [891, 250], [593, -429], [-713, 816], [-505, -657], [-649, -278], [801, -521], [610, -429], [-917, -324], [662, -722], [986, 561], [-835, 643], [351, -967], [-198, -239], [-457, -890], [-990, 27], [264, 965], [-143, 495], [-808, -119], [-751, -923], [-480, -159], [-669, 921], [-186, -173], [-236, -541], [-856, 609], [-159, -947], [817, 131], [-770, 561], [77, 263], [537, 64], [-635, 373], [581, 887], [-764, -12], [19, 341], [648, -551], [812, -958], [478, -511], [497, -269], [-177, -746], [155, 405], [954, -445], [-317, 971], [769, -623], [-889, -487], [-991, 837], [528, 763], [-479, -548], [-407, -398], [-187, -703], [232, -805], [-470, 508], [-734, 243], [888, -943], [665, -539], [-153, -90], [178, 686], [382, 183], [-549, 627], [-29, 948], [-204, 95], [997, -396], [457, -815], [-995, -230], [-743, 42], [-392, -514], [235, -668], [847, 195], [229, 519], [154, 483], [367, 895], [818, 625], [-988, -166], [-182, -972], [-395, -848], [-969, -421], [845, 714], [-862, -911], [-834, -550], [466, -500], [-686, 729], [-743, 703], [-310, 484], [-881, -285], [-876, -863], [-12, 800], [602, -289], [-581, -537], [-780, 775], [562, -848], [-504, 93], [670, 752], [-872, -714], [218, 358], [624, 626], [795, 246], [123, -227], [-272, 529], [-134, -840], [-443, -764], [-971, 212], [459, 388], [-562, -336], [52, 436], [-28, -124], [-431, 565], [758, -814], [875, 596], [108, 727], [-387, -785], [-144, 876], [166, 905], [964, -644], [222, 737], [322, -88], [47, -1], [310, -943], [-703, -690], [-430, 164], [-366, -328], [171, 474], [-484, -101], [-547, 920], [-666, -517], [170, -480], [-622, 232], [-24, -187], [310, -832], [-490, -193], [-774, 274], [288, 284], [-115, 982], [743, -375], [651, 625], [154, 33], [489, 9], [414, -682], [-775, 423], [-716, -442], [31, 899], [-518, -263], [509, -858], [139, 62], [154, -383], [306, 549], [726, -913], [280, -582], [-100, -183], [-975, 930], [-120, -525], [420, 844], [-286, 963], [127, 151], [-571, 534], [410, -531], [316, -692], [-624, -456], [-636, 831], [-165, 694], [857, 104], [748, -916], [468, 641], [588, 281], [455, -238], [-232, 752], [-568, -557], [120, 919], [921, 175], [944, 719], [-361, -794], [559, 741], [-689, -425], [-163, 584], [656, 906], [-383, 144], [-231, 787], [-863, 880], [649, -100], [483, -408], [440, 238], [193, 745], [-276, -373], [-620, -269], [777, -429], [-38, 920], [-205, -417], [112, -566], [977, -324], [205, -413], [-85, 491], [-101, -371], [280, 110], [90, -283], [-563, 999], [-603, -574], [148, 955], [-846, -627], [229, 31], [-145, -734], [-944, 607], [496, -759], [-275, -658], [401, -253], [210, 206], [-41, -899], [37, 589], [397, 208], [61, -117], [-189, -865], [-390, 549], [692, 678], [-14, -407], [-924, -362], [-45, 961], [718, -312], [-479, -62], [-650, -72], [499, 848], [721, -35], [-352, -658], [-203, 119], [-859, -659], [-271, -513], [478, -597], [991, 727], [-975, -244], [-200, -959], [-140, 644], [768, -740], [551, 149], [-722, 127], [-465, 375], [-510, -887], [456, 524], [-95, -230], [950, -916], [789, 53], [361, 41], [-461, 472], [951, 852], [724, -868], [443, 324], [961, -323], [-11, 108], [-961, -226], [-947, -53], [109, 875], [-372, -204], [533, -896], [-177, 217], [-862, 639], [902, -420], [414, 489], [-915, 888], [-287, 420], [-64, -436], [314, 489], [362, -648], [915, 591], [-657, 317], [899, 649], [-108, 403], [-946, 814], [368, 985], [943, 819], [-154, 172], [736, 552], [452, -607], [-43, 466], [-62, -965], [996, 970], [275, 722], [966, 164], [504, -573], [-951, 655], [47, -300], [681, -56], [108, -653], [643, -75], [-627, 336], [-960, 37], [-642, 208], [-573, -880], [478, 356], [377, 392], [-746, 683], [296, 965], [-990, 751], [-871, -368], [-783, -525], [749, 3], [-824, 673], [-644, 23], [46, 263], [517, 818], [462, -729], [-260, 40], [822, -562], [801, -443], [207, -355], [518, -403], [-160, 841], [602, -627], [-158, -188], [-960, 151], [652, 342], [379, -928], [-124, -598], [-903, 113], [-215, 980], [-544, -50], [713, 118], [-830, 694], [228, -968], [624, -327], [-138, -545], [991, 262], [777, -517], [-685, 297], [305, -67], [294, -544], [-894, -703], [-803, -617], [-958, 472], [857, -573], [-270, -501], [977, 753], [935, -478], [-118, 703], [93, 817], [645, 575], [326, -952], [-487, -956], [952, 412], [970, 775], [-506, 257], [-69, -660], [673, -559], [-48, -99], [464, -388], [-249, -839], [524, 946], [-536, -749], [964, -660], [-854, -398], [993, 523], [338, 254], [-553, 679], [253, -561], [-570, -717], [-412, 423], [699, -172], [-408, 34], [-946, -539], [-273, 66], [-545, -345], [978, 997], [868, 719], [787, 622], [159, -230], [-288, -186], [-17, 710], [153, -977], [232, -644], [876, 522], [434, 565], [-677, -481], [-609, -238], [-903, -417], [-130, -370], [-907, 737], [-466, 441], [761, -564], [893, 395], [281, 935], [434, 752], [-243, -611], [991, -254], [-756, 350], [724, -250], [-588, 827], [-32, 513], [726, 98], [372, 374], [-246, -47], [-176, 777], [-614, 0], [129, -784], [-243, 15], [846, -921], [-439, -388], [809, -937], [-241, 138], [769, -667], [-60, 951], [-5, -822], [874, -677], [-386, 304], [-555, -631], [-667, 360], [-958, -870], [-274, -266], [-928, -73], [580, 359], [-591, -696], [-775, 100], [-841, 369], [-523, 758], [-719, -981], [627, 942], [-11, -449], [-97, -776], [-204, -602], [194, -221], [335, 260], [953, 994], [124, 199], [-387, 933], [492, 291], [45, -639], [881, -795], [828, -142], [-266, 214], [310, 12], [394, 134], [190, 855], [736, -14], [696, 943], [58, -573], [-270, 327], [228, 81], [479, 630], [541, 746], [-749, 739], [-343, -78], [785, -819], [-172, 270], [-794, 613], [-437, 842], [-211, 759], [244, -127], [427, -899], [-559, -71], [970, 634], [545, 234], [-479, 64], [970, -541], [-981, -564], [909, -320], [-628, 328], [-168, 756], [893, -335], [-649, 240], [573, 989], [-833, -215], [528, -55], [761, 467], [-414, 481], [106, 181], [394, -140], [700, 110], [583, -117], [831, 62], [932, 897], [-412, 926], [859, -483], [836, 999], [205, -381], [8, 309], [-749, 795], [808, 116], [689, 287], [990, -162], [-362, -292], [716, -568], [-81, 460], [-982, -696], [-49, 790], [-532, -945], [512, 634], [-462, -615], [529, -761], [-486, -266], [-472, 586], [505, 794], [-162, -644], [-184, -152], [250, 683], [422, -755], [-773, 94], [-565, -936], [881, 109], [629, 593], [-907, -946], [-125, -416], [930, -514], [-205, 507], [327, -910], [83, -946], [-969, -521], [-457, -381], [68, -614], [510, 906], [-910, 774], [-247, 401], [-276, -578], [-81, -291], [367, 211], [-546, -718], [-167, 106], [131, 857], [542, 451], [-670, -280], [-848, -130], [-160, 472], [50, 462], [620, 428], [-46, -303], [-417, 300], [343, 974], [778, -274], [-434, -998], [-715, -379], [354, -871], [357, -203], [-227, 925], [-318, -152], [-85, -906], [-878, 881], [-672, 775], [942, -38], [10, 122], [-660, -624], [-719, 269], [-75, 267], [-30, 676], [-320, -574], [-380, 160], [-882, -515], [542, 666], [220, -719], [241, -951], [-276, -722], [416, 403], [105, 668], [-998, -254], [-259, -756], [-214, -799], [687, 722], [884, 691], [-774, 432], [224, -349], [25, -74], [-992, 386], [-824, 559], [-994, 838], [-120, 567], [732, 880], [108, 109], [-399, -675], [-181, -798], [788, 163], [74, 665], [-247, -963], [505, 160], [20, -932], [-637, 681], [765, -691], [844, -769], [-906, -698], [716, 445], [609, 221], [-617, 589], [-375, 102], [90, 294], [-484, -269], [65, -897], [-464, -505], [399, -134], [-975, 168], [912, -724], [-63, 630], [613, -476], [-95, 163], [-879, -184], [396, 25], [731, 723], [-958, -533], [-568, -643], [649, 305], [101, 353], [511, 766], [844, -406], [996, 895], [707, 398], [-790, -289], [263, 53], [867, 25], [730, 186], [396, 666], [978, 612], [944, -446], [936, 959], [310, 112], [900, -530], [959, 812], [-251, 751], [-712, 205], [208, -779], [-19, -120], [-147, -729], [508, -621], [418, -567], [164, 964], [54, 464], [518, -619], [-53, 694], [-786, -838], [-40, 845], [-235, 656], [579, -988], [485, -962], [-157, -126], [-565, -220], [-850, -336], [-865, -494], [367, 281], [261, 464], [-830, 83], [-650, -658], [-34, -757], [-351, -241], [490, -555], [93, 311], [691, 953], [-662, -5], [-908, 147], [752, -465], [-280, -292], [-296, -831], [-469, -657], [-829, -902], [57, -189], [173, 74], [-825, -67], [836, -780], [-955, -285], [945, 845], [-185, -363], [140, 654], [-115, -658], [-852, -755], [-285, 769], [603, -327], [-148, 198], [-968, 217], [-721, -954], [909, -526], [-98, -444], [-204, 914], [558, 712], [-62, -313], [614, 777], [-836, 190], [-833, 946], [-654, 706], [762, -166], [-376, -853], [-194, -841], [-682, 69], [885, -956], [36, 972], [975, -707], [-971, 720], [-528, 339], [409, 777], [-170, 480], [-50, -228], [657, 392], [378, 276], [433, -771], [36, 196], [-338, 135], [426, -114], [259, 841], [-152, 124], [616, 646], [-526, 936], [-183, -13], [817, 974], [282, 16], [-550, -935], [-559, -728], [224, 512], [-405, -124], [-212, 27], [-613, -794], [492, 318], [-308, -610], [-261, 834], [644, 308], [152, -886], [784, 999], [919, 935], [565, -807], [-951, -928], [-896, -896], [-918, 683], [-453, 14], [-396, 469], [-434, 562], [756, 990], [-486, 834], [-809, 899], [-366, 28], [970, -742], [100, -350], [-140, 817], [-567, -954], [-739, 933], [563, -107], [698, 303], [423, 72], [-162, 591], [-711, -322], [-998, 567], [768, -499], [888, -155], [502, -433], [-565, 93], [192, 589], [-854, 597], [-414, -756], [-909, 907], [-182, 777], [-638, -793], [-365, -65], [502, 532], [786, -969], [-440, 87], [981, -984], [-97, -970], [-242, -230], [577, 70], [641, 541], [209, -304], [-582, 178], [267, -175], [-952, 503], [-377, -607], [689, 160], [226, -578], [308, -703], [128, 999], [686, -468], [955, -473], [-345, -397], [-694, 347], [-606, 780], [-726, 538], [875, 559], [-904, -554], [-878, -792], [-51, -854], [361, -212], [-914, 470], [-332, 880], [-22, 361], [92, -124], [-542, 979], [363, -85], [-48, -342], [-481, -636], [635, 89], [238, 184], [-346, 437], [-398, -633], [908, -284], [-76, 92], [393, -591], [245, 657], [369, -306], [82, 436], [777, -916], [-777, 914], [200, -723], [-935, -40], [-126, -479], [924, 450], [44, 735], [692, -68], [-106, -323], [-401, 425], [272, -840], [546, 782], [-695, 57], [446, -122], [-893, -103], [241, 585], [256, 14], [-883, -508], [-896, 76], [-300, 928], [581, 290], [71, -265], [294, 110], [-136, -418], [-332, 631], [342, -574], [582, 583], [-255, -518], [-978, 781], [558, 123], [-559, -107], [-104, 546], [-751, -69], [318, 39], [110, -739], [783, -847], [-5, 989], [-429, -98], [-922, 776], [141, 152], [531, 61], [-860, -698], [-824, 725], [433, 436], [-147, 199], [882, 956], [-988, 54], [-302, -299], [566, -385], [575, -384], [-196, -250], [-479, -972], [576, 189], [-789, -470], [-114, -496], [-75, 384], [-614, -774], [598, -948], [-26, 417], [187, 185], [-878, 603], [496, -126], [530, -432], [-813, -721], [970, 667], [836, -583], [-918, -736], [269, 212], [126, 146]更改为position以使absolute工作：

z-index

// Navigation
function initNav() {
	// Main
	const $menuTrigger = $('button#brgr');
	const $menuArea = $('#menu');
	// Content
		var $menuExpanded = false;
		 $menuTrigger.on('click', function(){
			if (!$menuExpanded) {
				$menuArea.addClass('is-out');
					$menuExpanded = true;
			} else {
				$menuArea.removeClass('is-out');
					$menuExpanded = false	
			}
		});
}
    
$(document).ready(function() {

initNav();

});

button {
  background: 0;
  border: 0;
  cursor: pointer;
}

#menu {
  position:fixed;
  width:calc( 100vw - 59.3%);
  right:calc( -100vw - -59.3%);
  top:0;
  bottom: 0;
  background: blue;
  transition: 200ms all ease;
  z-index:10;
}

#menu.is-out {
  right: 0
}

header {
  width: 100%;
  padding: 40px 0 20px;
  background: #fff;
  position: fixed;
  z-index: 9;
} 

  header a.logo {
    max-width: 175px;
    position: relative;
    float: left;
  }

  header #brgr {
    width: 35px;
    height: auto;
    float: right;
    position: absolute;
    z-index: 100;
  }

    header #brgr span {
      display: block;
      background: #2d2d2d;
      height: 2px;
      margin-bottom: 4px;
      width: auto;
    }

    header #brgr:hover span {
      background: grey
    }

header .wrapper {
  padding-left: 30px;
  padding-right: 30px
}

Answer 2

我会移动#menu元素内的header，因为您可能会在滚动时将标题粘贴到页面顶部（可能处于响应模式？！），然后您可以设置较高的z-index属性，以使其始终可见。

// Navigation
function initNav() {
	// Main
	const $menuTrigger = $('button#brgr');
	const $menuArea = $('#menu');
	// Content
		var $menuExpanded = false;
		 $menuTrigger.on('click', function(){
			if (!$menuExpanded) {
				$menuArea.addClass('is-out');
					$menuExpanded = true;
			} else {
				$menuArea.removeClass('is-out');
					$menuExpanded = false	
			}
		});
}
    
$(document).ready(function() {

initNav();

});

button {
  background: 0;
  border: 0;
  cursor: pointer;
}

#menu {
  position:fixed;
  width:calc( 100vw - 59.3%);
  right:calc( -100vw - -59.3%);
  top:0;
  bottom: 0;
  background: blue;
  transition: 200ms all ease;
  z-index:10;
}

#menu.is-out {
  right: 0
}

header {
  width: 100%;
  padding: 40px 0 20px;
  background: #fff;
  position: fixed;
  z-index: 9;
} 

  header a.logo {
    max-width: 175px;
    position: relative;
    float: left;
  }

  header #brgr {
    width: 35px;
    height: auto;
    float: right;
    position: relative;
    z-index: 100;
  }

    header #brgr span {
      display: block;
      background: #2d2d2d;
      height: 2px;
      margin-bottom: 4px;
      width: auto;
    }

    header #brgr:hover span {
      background: grey
    }

header .wrapper {
  padding-left: 30px;
  padding-right: 30px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
   
    <div class="wrapper">
   
       <a class="logo" href="">
           A S P X
       </a>
    
         <button id="brgr">
           <span></span>
           <span></span>
           <span></span>
         </button>
         
         <div id="menu">
            Menu
          </div>

    </div>

  </header>

z-index仍然在我的汉堡包图标上工作

2 个答案: