爲什麼相對定位會生成一個水平滾動條？

Question

我想使用位置相對位置來放置一些文字/圖片，但是當使用相對位置時，它會創建滾動條，儘管內容不在那裏。有沒有辦法除了溢出沒有這樣做：隱藏？

的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％的寬度（如塊元素做）。您可能無法看到它，但很有可能通過將left: 800px;放在您的元素上，它正在推出界限，超出屏幕邊緣。

使用絕對定位時不會發生這種情況，因爲它基本上告訴一切都忽略元素佔用的空間。

您可以嘗試確保您所定位的所有元素都設置爲display: inline;或display: inline-block;，並且/或者在元素上設置一個寬度，以便將其保留在屏幕寬度內。