爲什麼我的網站上顯示水平滾動條？

Question

我正在製作一個網站和一個水平滾動條顯示。當然，我可以使用overflow-x來解決我所有的問題，但我想知道問題的由來。有人可以告訴我什麼讓滾動條顯示？這是我的CSS：

body { 
    background-image: url("rain.jpg"); 
    background-repeat: no-repeat; 
    background-size: 100% 800px; 
} 

#header { 
    width: 83%; 
    height: 70px; 
    background-color: blue; 
    border: cyan solid 3px; 
    border-radius:20px; 
    position: relative; 
    top: 20px; 
    margin: auto; 
} 

p { 
    font-size:30px; 
    font-weight: bold; 
    color: yellow; 
    position: relative; 
    right: -450px; 
    top: -8px; 
} 

#container { 
    position: relative; 
    width: 83%; 
    height: 1000px; 
    top: 50px; 
    margin: auto; 
    background-color: blue; 
} 

.img { 
    height: 150px; 
    width: 225px; 
    padding: 0px; 
    padding-top: 30px; 
    cursor: pointer; 
    opacity: 1; 
} 

.click { 
    height: 400px; 
    width: 600px; 
    position: relative; 
    right: -200px; 
    cursor: pointer; 
} 

li { 
    display: inline-block; 
} 

Answer 1

注意，您必須相對定位與right: -450px右移你<p>元素。

使用position: relative元素的原始空間被保留。因此，當您將元素向右移動450px時，其佈局中的原始空間將保持不變，並且文檔會水平延長。這就是滾動條的原因。

刪除或調整right: -450px規則，看到了差距。

此外，只是爲了對比，開關relative與absolute定位，從文檔流中刪除元素，並刪除原始空間。

Read more about CSS positioning at MDN.

Answer 2

我會指出這一點。

p{ 
    ... 
    position: relative; 
    right: -450px; 
    ... 
}