[分享]css加了定位元素看不见了

 在前端开发中，很多人经常会遇到这样的问题：在网页中使用了CSS定位后，其中的某些元素却不知道被“放到哪里”了，看不见了，这是为什么呢？下面我们来探讨一下这个问题。在CSS中使用定位是非常常见的，我们...

 在前端开发中，很多人经常会遇到这样的问题：在网页中使用了CSS定位后，其中的某些元素却不知道被“放到哪里”了，看不见了，这是为什么呢？下面我们来探讨一下这个问题。
在CSS中使用定位是非常常见的，我们可以通过设置元素的position属性来实现。而用过定位的用户都知道，当我们使用定位的时候，它会让元素脱离文档流，其它元素会把它们当作不透明的空隙，可以看作是画布上的一块空白。
举个例子，我们在使用CSS的时候，常常会使用绝对定位。它让我们的元素摆脱了文档流的限制，这在设计特别悬浮的元素时非常有用。但是，用过定位的用户也知道，有时候你真的会看不到你的元素。
事实上，这并不是CSS定位的错，而是因为我们没有为元素设置合理的尺寸和位置，让元素从浏览器视图的范畴之外溢出。正如下面的代码片段所示：

p {
  position: absolute;
  left: -9999px;
} 

这段CSS代码会让我们的段落元素无限制往左移动（需要注意的是这个代码片段不一定适用于所有场景，请根据自己的需求灵活使用），因为我们没有指定这个元素的宽度和高度，所以这个元素就在浏览器视图之外漂浮着，不知所踪了。
在使用定位的时候，如果我们不小心把元素放到了浏览器的视图之外，那么就可以通过给元素设置合理的尺寸和位置让它重新出现在我们的视野中。这时候，我们可以通过修改CSS样式来让元素重新“回家”。
总之，在使用CSS定位的时候，一定要非常小心。一旦你的元素流失在浏览器的视野之外，就有可能被隐藏起来，而且你很难再次找到他们。因此，一定要仔细检查你的代码，保证元素都在浏览器视野范围之内。