所以我正在创建幻灯片，但遇到了问题。我有一些div，这些位置是绝对的，我给它们指定left: 100%;。这在全屏上很好用，但是当我调整屏幕大小时，给overflow-x: hidden;和body标签赋予了绝对位置中断html。如何解决？
这里是代码
html,
body {
margin: 0 auto;
overflow-x: hidden;
}
.slides {
width: 100%;
height: 100vh;
position: absolute;
}
.slide-img {
width: 100%;
height: 100%;
}
#slide-2 {
left: 100%;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Marseille</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="slides" id="slide-1">
<img class="slide-img" src="media/slideshow/image-1.jpg">
</div>
<div class="slides" id="slide-2">
<img class="slide-img" src="media/slideshow/image-2.jpg">
</div>
<div class="slides" id="slide-3">
<img class="slide-img" src="media/slideshow/image-3.jpg">
</div>
<div class="slides" id="slide-4">
<img class="slide-img" src="media/slideshow/image-4.jpg">
</div>
</body>
</html>您必须为全部四个（或实际上三个）绝对定位的DIV设置left参数，否则，第3和第4个DIV（仍然具有left: 0）将显示在视口内并覆盖DIV＃1。在下面的代码段中，我将2-4的DIV的左侧参数设置为25/50/75％，以证明其有效（您需要将其至少设置为100％或更高，具体取决于将其滑入视口的方式） 。
html, body {
margin: 0 auto;
overflow-x: hidden;
}
.slides {
width: 100%;
height: 100vh;
position: absolute;
}
.slide-img {
width: 100%;
height: 100%;
}
#slide-2 {
left: 25%;
}
#slide-3 {
left: 50%;
}
#slide-4 {
left: 75%;
} <div class="slides" id="slide-1">
<img class="slide-img" src="http://placehold.it/800x500/fb8">
</div>
<div class="slides" id="slide-2">
<img class="slide-img" src="http://placehold.it/700x500/bf8">
</div>
<div class="slides" id="slide-3">
<img class="slide-img" src="http://placehold.it/900x500/8bf">
</div>
<div class="slides" id="slide-4">
<img class="slide-img" src="http://placehold.it/600x500/f8b">
</div>