css盒子跑到外面

最近在做网页设计时，遇到了一个棘手的问题：CSS盒子跑到了外面。

.container {
  width: 500px;
  height: 500px;
  border: 1px solid black;
  margin: 0 auto;
  overflow: hidden;
}
.box {
  width: 200px;
  height: 200px;
  background-color: red;
  position: relative;
  left: 600px;
}
 

以上是我设置的CSS样式，本意是想让box元素从屏幕右侧滑入，但是它竟然没有停在容器内，而是继续向右滑出了屏幕。

查阅资料后得知，这个问题的原因是因为我将box元素的position属性设置为了"relative"相对定位，这使得它在进行左右移动时不会受到限制，从而越界了。

解决方法有两个：

一是将container容器添加"position: relative"的样式，这样就可以限制box元素的移动范围，使其不会跑出容器。

.container {
  position: relative;
  width: 500px;
  height: 500px;
  border: 1px solid black;
  margin: 0 auto;
  overflow: hidden;
}
.box {
  width: 200px;
  height: 200px;
  background-color: red;
  position: relative;
  left: 600px;
}
 

二是将box元素改为"absolute"绝对定位，配合"right: -200px"的样式可以使其初始位置在容器外部，但是由于它不再是文档流中的元素，需要将container容器的position属性设置为"relative"。

.container {
  position: relative;
  width: 500px;
  height: 500px;
  border: 1px solid black;
  margin: 0 auto;
  overflow: hidden;
}
.box {
  width: 200px;
  height: 200px;
  background-color: red;
  position: absolute;
  right: -200px;
}
 

以上两种方法均可解决这个问题，具体使用哪种方法要根据实际情况来决定。对于刚开始学CSS的朋友来说，要注意定位属性的使用，避免出现盒子"跑路"的情况。