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

Question

My absolutely positioned element is set to width of 100%, but even so, when it renders it creates a horizontal scroll bar and oversteps the boundary of the page. The statically positioned elements above appear to be shorter when viewed in a browser even though they also span a full width.

This is the code that is being rendered: the offending element is #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

Added position:relative to nav.

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