0
私の絶対配置された要素は100％の幅に設定されていますが、レンダリングすると、水平スクロールバーが作成され、ページの境界を越えてしまいます。上記の静的に配置された要素は、ブラウザーで見ると、幅が全幅にわたっても短く表示されます。絶対配置された要素の幅の割合はどのくらいですか？
これは、レンダリングされているコードである：相対NAVする：問題の要素は#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>
、あなたの前の質問を行っているように、質問の中に、あなたのコードを含めてください。読者にリンクをクリックさせてコードを見せないようにしてください。 – BoltClock
親の位置付けされた要素（静的ではない）との相対位置です。絶対配置された要素に 'left：0;'と 'top：0'を使用していることを確認してください。 –
@Mr。エイリアンありがとうございました。 –