html - 绝对定位元素的宽度百分比是多少？

Question

我的绝对定位元素设置为 100% 的宽度，但即便如此，当它呈现时它会创建一个水平滚动条并超出页面边界。在浏览器中查看时，上面的静态定位元素看起来更短，即使它们也跨越了整个宽度。

这是正在呈现的代码:有问题的元素是#navlinks https://gist.github.com/anonymous/5d8bde1f196b919dab297560ff85b072

@charset "utf-8";
#wrapper {}

h1,
h2 {
  color: #1E1E1E;
  font-style: normal;
  font-weight: 400;
}

h1 {
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 0px;
  padding-bottom: 20px;
}

#wrapper #hero {
  max-height: 400px;
  overflow: hidden;
}

#menulink {
  margin: 0;
  text-align: center;
  background-color: #1E1E1E;
}

#menulink a {
  text-transform: uppercase;
  color: white;
  font-weight: 200;
  text-decoration: none;
  display: block;
  padding-top: 0.1em;
  padding-bottom: 0.1em;
}

#navlinks {
  position: absolute;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.53);
}

#navlinks a {
  display: block;
  padding-top: 10px;
  padding-bottom: 10px;
  font-weight: 400;
  text-decoration: none;
  text-transform: uppercase;
}

#wrapper #hero img {
  max-width: 100%;
}

figure {
  width: 400px;
  margin-left: auto;
  margin-right: auto;
}

figure img {
  max-width: 100%;
}

.grayscale {
  filter: grayscale(100%);
}

.grayscale:hover {
  filter: grayscale(0%);
}

<div id="wrapper">
  <header>
    <h1> Bayside Beat</h1>
    <nav>
      <h2 id="menulink"><a href="#navlinks">Menu</a></h2>
      <ul id="navlinks">
        <li> <a href="#"> Home </a></li>
        <li> <a href="#">Sights </a></li>
        <li> <a href="#">Dining </a></li>
        <li> <a href="#">Events </a></li>
        <li> <a href="#">Lodging </a></li>
      </ul>
    </nav>
  </header>

  <div id="hero">
    <img src="https://upload.wikimedia.org/wikipedia/commons/0/0c/GoldenGateBridge-001.jpg">
    <p>Bayside Beat keeps you informed of the best places to see, eat, and sleep in the City by the Bay.</p>
  </div>
  <main>
    <h2>Riding the Cable Cars</h2>
    <p> No visit to San Francisco is complete without a ride on the iconic cable cars that climb up the vertiginous hills of the city. Of the twenty-three lines established between 1873 and 1890, three remain: two routes from downtown near Union Square to
      Fisherman's Wharf, and a third route along California Street.</p>
    <p>The cable cars rely on cables running constantly beneath the road’s surface. The driver—or gripman—uses a lever to grip the cable to pull the car and its passengers up the hill. The gripman requires not only great strength, but also great skill. He
      needs to know where to release the cable to coast over crossing cables and points. The conductor works in close cooperation with the gripman, operating the brake at the rear of the car to prevent it from running out of control on the downward slopes.</p>
    <figure> <img src="http://www.hdwallpapers.in/walls/lotus_flowers-wide.jpg" class="grayscale">
      <figcaption>The cable car terminus near Union Square.
      </figcaption>
    </figure>
    <p>Although the cable cars are now mainly a tourist attraction, they’re still used by local commuters to get to and from work. The California Street line is particularly popular among commuters on weekdays. </p>
  </main>
  <aside>
    <h2>Cable Car Tips</h2>
    <p>A single ride on a cable car costs $7. If you plan to travel around the city, it’s often cheaper to buy a Muni Passport, which gives you unlimited rides on San Francisco’s extensive public transport system, including the cable cars (but not the BART
      subway system). Even a single-day passport ($20) will save you money if you make a return trip, and stop off to visit Chinatown one way.</p>
    <p>There are often long lines at the cable car terminus, particularly on the Powell-Mason and Powell-Hyde routes. If you don’t want to wait, try walking a few stops along the route. The conductor usually leaves a small number of places to pick up passengers
      on the way. The California Street route is generally less crowded (but not as spectacular).</p>
  </aside>
  <footer>
    <p>© Copyright 2013–16 Bayside Beat</p>
  </footer>
</div>

Answer 1

添加position:relative于导航。

@charset "utf-8";
#wrapper {}

h1,
h2 {
  color: #1E1E1E;
  font-style: normal;
  font-weight: 400;
}

h1 {
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 0px;
  padding-bottom: 20px;
}

#wrapper #hero {
  max-height: 400px;
  overflow: hidden;
}

#menulink {
  margin: 0;
  text-align: center;
  background-color: #1E1E1E;
}

#menulink a {
  text-transform: uppercase;
  color: white;
  font-weight: 200;
  text-decoration: none;
  display: block;
  padding-top: 0.1em;
  padding-bottom: 0.1em;
}

nav {
  position: relative;
}

#navlinks {
  position: absolute;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.53);
}

#navlinks a {
  display: block;
  padding-top: 10px;
  padding-bottom: 10px;
  font-weight: 400;
  text-decoration: none;
  text-transform: uppercase;
}

#wrapper #hero img {
  max-width: 100%;
}

figure {
  width: 400px;
  margin-left: auto;
  margin-right: auto;
}

figure img {
  max-width: 100%;
}

.grayscale {
  filter: grayscale(100%);
}

.grayscale:hover {
  filter: grayscale(0%);
}

<div id="wrapper">
  <header>
    <h1> Bayside Beat</h1>
    <nav>
      <h2 id="menulink"><a href="#navlinks">Menu</a></h2>
      <ul id="navlinks">
        <li> <a href="#"> Home </a></li>
        <li> <a href="#">Sights </a></li>
        <li> <a href="#">Dining </a></li>
        <li> <a href="#">Events </a></li>
        <li> <a href="#">Lodging </a></li>
      </ul>
    </nav>
  </header>

  <div id="hero">
    <img src="https://upload.wikimedia.org/wikipedia/commons/0/0c/GoldenGateBridge-001.jpg">
    <p>Bayside Beat keeps you informed of the best places to see, eat, and sleep in the City by the Bay.</p>
  </div>
  <main>
    <h2>Riding the Cable Cars</h2>
    <p> No visit to San Francisco is complete without a ride on the iconic cable cars that climb up the vertiginous hills of the city. Of the twenty-three lines established between 1873 and 1890, three remain: two routes from downtown near Union Square to
      Fisherman's Wharf, and a third route along California Street.</p>
    <p>The cable cars rely on cables running constantly beneath the road’s surface. The driver—or gripman—uses a lever to grip the cable to pull the car and its passengers up the hill. The gripman requires not only great strength, but also great skill. He
      needs to know where to release the cable to coast over crossing cables and points. The conductor works in close cooperation with the gripman, operating the brake at the rear of the car to prevent it from running out of control on the downward slopes.</p>
    <figure> <img src="http://www.hdwallpapers.in/walls/lotus_flowers-wide.jpg" class="grayscale">
      <figcaption>The cable car terminus near Union Square.
      </figcaption>
    </figure>
    <p>Although the cable cars are now mainly a tourist attraction, they’re still used by local commuters to get to and from work. The California Street line is particularly popular among commuters on weekdays. </p>
  </main>
  <aside>
    <h2>Cable Car Tips</h2>
    <p>A single ride on a cable car costs $7. If you plan to travel around the city, it’s often cheaper to buy a Muni Passport, which gives you unlimited rides on San Francisco’s extensive public transport system, including the cable cars (but not the BART
      subway system). Even a single-day passport ($20) will save you money if you make a return trip, and stop off to visit Chinatown one way.</p>
    <p>There are often long lines at the cable car terminus, particularly on the Powell-Mason and Powell-Hyde routes. If you don’t want to wait, try walking a few stops along the route. The conductor usually leaves a small number of places to pick up passengers
      on the way. The California Street route is generally less crowded (but not as spectacular).</p>
  </aside>
  <footer>
    <p>© Copyright 2013–16 Bayside Beat</p>
  </footer>
</div>