html - 如何将main方法放在屏幕顶部

Question

我遇到的问题是我在 <main> 中输入的任何内容标签从屏幕中央开始，但我需要 <main>导航栏上的动画标签。有人知道如何解决这个问题吗？

这是我最早的“元素”之一，如果有人能帮助我确保它的安全，我也很感兴趣。 =)

(function() {

  var nav = $('nav'),
      menu = $('nav h1'),
      main = $('main'),
      open = false,
      hover = false;

    menu.on('click', function() {
    open = !open ? true : false;
      nav.toggleClass('menu-active');
      main.toggleClass('menu-active');
      nav.removeClass('menu-hover');
      main.removeClass('menu-hover');
      console.log(open);
  });

    menu.hover( 
      function() {
        if (!open) {
          nav.addClass('menu-hover');
          main.addClass('menu-hover');
        }
      },
      function() {
        nav.removeClass('menu-hover');
        main.removeClass('menu-hover');
      }
    );

})();

	   div{
	   	color: white;
	   }

	   html, body{
	height: 100%;
    }

    *{
	box-sizing: border-box;
	margin: 0;
  	padding: 0;
  	}

    body{
	background: #353441;
	font-family: tahoma;
	line-height: 1.7;
	perspective-origin: 0% 50%;
	perspective: 800px;
  	}

  	main{
	margin-top: 0;
  	}

  	nav,main{
	transition: transform 150ms ease-out;
  	}

  	nav{
	z-index: 100;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 16em;
	background-color: #353441;
	transform: translateX(-16em);
  	}

  	nav.menu-active{
	transform: translateX(0);
  	}
  	
  	nav.menu-hover{
	transform: translateX(-15em);
  	}

  	nav h1{
	z-index: 100;
	display: block;
	position: absolute;
	top: 0;
	right: -65px;
	height: 60px;
	width: 65px;
	line-height: 60px;
	font-size: .8em;
	font-weight: 300;
	letter-spacing: 1px;
	color: white;
	text-transform: uppercase; 
	text-align: center;
	background-color: #353441; 
	cursor: pointer;
  	}

  	nav h1:hover{
	color: white;
  	}

  	nav ul{
	margin: 0;
	padding: 0; 
  	}

  	nav li{
	display: inline-block;
	padding: 0 1em;
	width: 100%;
	height: 60px;
	color: #9dc6d1;
	line-height: 60px;
	background-color: #353441;
	transition: all .5s ease-in;
  	}

  	nav li:nth-of-type(2n){
	background-color: #3a3947;
  	}

  	nav li:hover{
	background: orangered;
	color: white;
  	}

  	main{
	z-index: 0;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: flex;
	align-items: center;
	overflow: hidden; 
  	}

  	main:after{
	content: '';
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: linear-gradient(to right, transition, rgba(33,33,45,.5));
	visibility: hidden;
	opacity: 0;
	transition: opacity 150ms ease-out, visibility 0s 150ms;
  	}

  	main.menu-active{
	border-radius: 0.001px;
	transform: translateX(16em) rotateY(15deg);
  	}

  	main.menu-active:after{
	visibility: visible;
	opacity: 1;
	transition: opacity 150ms ease-out, visibility 0s;
  	}

  	main.menu-hover{
	border-radius: 0.001px;
	transform: translateX(1em) rotateY(1deg); 
  	}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


		<!--Navigation Bar-->

		<nav class="menu-activea">
			<h1>---</h1>
			<ul>
				<li>Domov</li>
				<li>Majice</li>
				<li>Puloverji</li>
				<li>Skodelice</li>
				<li>Galerija</li>
				<li>O nas</li>
				<li>Kontakt</li>
			</ul>
		</nav>

		<main>

			<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit,   	  	  	 
      sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad   	  	  	  	  	  	  	  	  	  	  	  	  	  	  	  	  	 
     minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

		</main>

Answer 1

您的主标签定义了一个 flex 显示，并将元素对齐到中心。删除 css align-items: main 标签的中心，所有内容都将被推到顶部:

(function() {

  var nav = $('nav'),
      menu = $('nav h1'),
      main = $('main'),
      open = false,
      hover = false;

    menu.on('click', function() {
    open = !open ? true : false;
      nav.toggleClass('menu-active');
      main.toggleClass('menu-active');
      nav.removeClass('menu-hover');
      main.removeClass('menu-hover');
      console.log(open);
  });

    menu.hover( 
      function() {
        if (!open) {
          nav.addClass('menu-hover');
          main.addClass('menu-hover');
        }
      },
      function() {
        nav.removeClass('menu-hover');
        main.removeClass('menu-hover');
      }
    );

})();

div{
	   	color: white;
	   }

	   html, body{
	height: 100%;
    }

    *{
	box-sizing: border-box;
	margin: 0;
  	padding: 0;
  	}

    body{
	background: #353441;
	font-family: tahoma;
	line-height: 1.7;
	perspective-origin: 0% 50%;
	perspective: 800px;
  	}

  	main{
	margin-top: 0;
  	}

  	nav,main{
	transition: transform 150ms ease-out;
  	}

  	nav{
	z-index: 100;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 16em;
	background-color: #353441;
	transform: translateX(-16em);
  	}

  	nav.menu-active{
	transform: translateX(0);
  	}
  	
  	nav.menu-hover{
	transform: translateX(-15em);
  	}

  	nav h1{
	z-index: 100;
	display: block;
	position: absolute;
	top: 0;
	right: -65px;
	height: 60px;
	width: 65px;
	line-height: 60px;
	font-size: .8em;
	font-weight: 300;
	letter-spacing: 1px;
	color: white;
	text-transform: uppercase; 
	text-align: center;
	background-color: #353441; 
	cursor: pointer;
  	}

  	nav h1:hover{
	color: white;
  	}

  	nav ul{
	margin: 0;
	padding: 0; 
  	}

  	nav li{
	display: inline-block;
	padding: 0 1em;
	width: 100%;
	height: 60px;
	color: #9dc6d1;
	line-height: 60px;
	background-color: #353441;
	transition: all .5s ease-in;
  	}

  	nav li:nth-of-type(2n){
	background-color: #3a3947;
  	}

  	nav li:hover{
	background: orangered;
	color: white;
  	}

  	main{
	z-index: 0;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: flex;
	/* align-items: center; */
	overflow: hidden; 
  	}

  	main:after{
	content: '';
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: linear-gradient(to right, transition, rgba(33,33,45,.5));
	visibility: hidden;
	opacity: 0;
	transition: opacity 150ms ease-out, visibility 0s 150ms;
  	}

  	main.menu-active{
	border-radius: 0.001px;
	transform: translateX(16em) rotateY(15deg);
  	}

  	main.menu-active:after{
	visibility: visible;
	opacity: 1;
	transition: opacity 150ms ease-out, visibility 0s;
  	}

  	main.menu-hover{
	border-radius: 0.001px;
	transform: translateX(1em) rotateY(1deg); 
  	}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


		<!--Navigation Bar-->

		<nav class="menu-activea">
			<h1>---</h1>
			<ul>
				<li>Domov</li>
				<li>Majice</li>
				<li>Puloverji</li>
				<li>Skodelice</li>
				<li>Galerija</li>
				<li>O nas</li>
				<li>Kontakt</li>
			</ul>
		</nav>

		<main>

			<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit,   	  	  	 
      sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad   	  	  	  	  	  	  	  	  	  	  	  	  	  	  	  	  	 
     minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

		</main>