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

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>

标签： htmlcssposition

Answer 1

您的主要标签是用 flex 的显示定义的，它将项目与中心对齐。删除 css align-items: center 主标签，所有内容都将被推到顶部：

(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>