为什么我的网站上显示水平滚动条？

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; 
    ... 
}