响应位置：绝对和相对

Question

我有响应导航的问题我有.toggle当打开展开时，当我给出.toggle position：relative; ul：position absolute;，除了我的自适应宽度，一切正常，我需要pos：relative;到出现的菜单不影响页面!!

有位置

@media screen and (max-width:1199px) {
 	/* Responsive menu */
 	nav {
		width: 100%;
		background: transparent;
	}
	ul {
		width: 100%;
		margin: 0 auto;
		padding: 0;
		display: none;
		position: absolute;
		z-index: 2;
	}
	ul li {
		padding: 20px;
		text-align: center;
		display: block;
		text-align: center;	
		background: #333333;
	}
	ul li:hover {
		background-color: #242424;
		transition: all 0.7s;
	}
	.toggle {
		font-size: 30px;
		color: #fff;
		text-align: right;
		width: 100%;
		margin-top: 25px;
		box-sizing: border-box;
		display: block;	
		margin-bottom: 30px;
		position: relative;
	}
	.active {
		display: block;
	}

<header>
  <div class="background_header overlay">
    <div class="container">
      <div class="row">
        <div class="col-md-2 col-ms-2 col-xs-2">
          <img src="img/logo.png" alt="Logotype" class="logo">
        </div>
        <div class="col-lg-7 col-lg-offset-3">
          <nav>
            <div class="toggle hidden-lg">
              <i class="fa fa-bars nav" aria-hidden="true"></i>
            </div>
            <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#ex1">About</a></li>
              <li><a href="#ex2">Expertise</a></li>
              <li><a href="#ex3">Teams</a></li>
              <li><a href="#ex4">Works</a></li>
              <li><a href="#ex5">People say</a></li>
              <li><a href="#ex6">Contact</a></li>
            </ul>
          </nav>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12 col-sm-12 text-center">
          <h1>We Are Awesome Creative Agency</h1>
          <p class="header_description">
            This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet
            mauris. Morbi accumsan ipsum velit.
          </p>
          <button type="submit" class="header_button">
                            <span class="content_button header_content_button">Learn More</span>
                        </button>
        </div>
      </div>
    </div>
  </div>
</header>

enter image description here

Screenshot my site

Answer 1

好的，我找到了答案，我给了我的身体position:relative; and ul { left:50%; margin-left:-50%; } 这是有效的，谢谢观看!!!