[分享]css东西被压着看不见

大家好，今天我来跟大家分享一件很奇怪的事情，就是当我们在使用CSS时，有时候我们所写的CSS代码并没有出错，但是页面上的元素却被其他元素所压住，从而看不见，这究竟是怎么回事呢？.example { w...

大家好，今天我来跟大家分享一件很奇怪的事情，就是当我们在使用CSS时，有时候我们所写的CSS代码并没有出错，但是页面上的元素却被其他元素所压住，从而看不见，这究竟是怎么回事呢？

.example {
   width: 100px;
   height: 100px;
   background-color: red;
   margin-top: 200px;
} 

以上是一个例子，我们给某个元素设置了一个宽、高、背景颜色，同时把它的上边距设为了200px。但是当我们刷新页面后，发现这个元素并没有出现在页面上，这是为什么呢？

原因其实很简单，就是因为在这个元素的上方，有其他元素所占据的空间。如果它上方的元素没有设置高度，那么这个元素的上边距就会根据文档流的规则，与上方元素的下外边距相叠加，从而导致整个元素被压住，看不见了。

那么该怎么解决这个问题呢？一种方法是给上方的元素也设置一个高度，这样就能避免两个元素的外边距叠加。另一种方法是给当前元素设置一个相对定位或者绝对定位，并且设置一个z-index值，这样就能将它置于其他元素的上方，从而展现出来了。

总之，当我们遇到CSS元素被压住看不见时，应该先检查上方元素是否有高度，并根据情况采取相应的解决措施。