html - 为什么相对定位会产生水平滚动条？

Question

我正在尝试使用相对位置定位一些文本/图片，但是当使用相对位置时，即使内容不在那里，它也会创建一个滚动条。除了 overflow:hidden 之外，有没有办法让它不这样做？

对象的CSS是

body {background-image:url('../images/logo1.jpg');

    background-repeat:no-repeat;
    background-size: cover;

}

body {color:black;}
a, a:visited { 
color:white; 
text-decoration:none;

}

div#header {
font-size:280%;
float:right;
text-decoration:underline;
}


#nav {
margin:0;
padding:0;
background:#808259 url(nav_bg.jpg) 0 0 repeat-x;
width:100%;
border:1px solid #42432d;
border-width:1px 0;
position:absolute;
top:100px;
left:0px;
font-size:175%;

}
    #nav li {
        display:inline;
        padding:0;
        margin:0;
    }
    #nav a:link,
    #nav a:visited {
        color:#000;
        background:#b2b580;
        padding:20px 40px 4px 10px;
        float:left;
        width:auto;
        border-right:1px solid #42432d;
        text-decoration:none;
        font:bold 1em/1em Arial, Helvetica, sans-serif;
        text-transform:uppercase;
        text-shadow: 2px 2px 2px #555;
    }
    #nav a:hover,
    #nav a:focus {
        color:#fff;
        background:#727454;
    }
    #nav li:first-child a {
        border-left:1px solid #42432d;
    }
    #home #nav-home a,
    #about #nav-about a,
    #archive #nav-archive a,
    #lab #nav-lab a,
    #reviews #nav-reviews a,
    #contact #nav-contact a {
        background:#e35a00;
        color:#fff;
        text-shadow:none;
    }
    #home #nav-home a:hover,
    #about #nav-about a:hover,
    #archive #nav-archive a:hover,
    #lab #nav-lab a:hover,
    #reviews #nav-reviews a:hover,
    #contact #nav-contact a:hover {
        background:#e35a00;
    }
    #nav a:active {
        background:#e35a00;
        color:#fff;
        font-size:150%;
    }

div.logo
img {
position:absolute;
left:0;
top:0;
}
div#support {
text-align:center;
font-size:250%;
color:#CC3300;
position:relative;
top:90px;
left:34%;
text-decoration:underline;
font-weight:bold;
}

div#photo 
img{
margin-top:7%;
margin-left:30%;
}
p#follow {
position:relative;
left:50%;
top:-40px;
font-size:250%;
color:white;
text-decoration:underline;
font-weight:bold;
margin-top:5
}



div#facebook 
img{
position:relative;
left:50%;
top:-40px;
}

div#sitemap {
font-size:200%;
text-decoration:underline;
font-weight:bold;
color:white;
position:relative;
left:600px; 
top:-200px;
}

ul#site {
font-size:175%;
margin-top:-10%;
margin-left: 33%;
padding-left: 0;
color:white;
}

@media (min-width : 1300px) 
and (max-width : 1400px) {

div#support {
text-align:center;
font-size:150%;
color:#CC3300;
position:relative;
top:90px;
left:60%;
text-decoration:underline;
font-weight:bold;
width:40%;

}
div#photo {
margin-top:3%;
height:50%;
width:50%;
}

div#sitemap {
font-size:200%;
text-decoration:underline;
font-weight:bold;
color:white;
position:relative;
left:400px; 
top:-200px;
}
div#facebook 
img{
position:relative;
left:50%;
top:-50px;
}
ul#site {
font-size:175%;
margin-top:-13%;
margin-left: 33%;
color:white;
}

Answer 1

如果您尝试定位文本，它可能有 100% 的宽度(就像 block 元素一样)。您可能看不到它，但很有可能通过将 left: 800px; 放在您的元素上，它会将其边界推出屏幕边缘。

使用绝对定位时不会发生这种情况，因为它基本上告诉所有内容忽略元素占用的空间。

您可以尝试确保您定位的所有元素都设置为 display: inline; 或 display: inline-block;，和/或设置您知道元素上的宽度将使它包含在屏幕的宽度内。