大家好,今天我来跟大家分享一件很奇怪的事情,就是当我们在使用CSS时,有时候我们所写的CSS代码并没有出错,但是页面上的元素却被其他元素所压住,从而看不见,这究竟是怎么回事呢?.example { w
大家好,今天我来跟大家分享一件很奇怪的事情,就是当我们在使用CSS时,有时候我们所写的CSS代码并没有出错,但是页面上的元素却被其他元素所压住,从而看不见,这究竟是怎么回事呢?
.example {
width: 100px;
height: 100px;
background-color: red;
margin-top: 200px;
}
以上是一个例子,我们给某个元素设置了一个宽、高、背景颜色,同时把它的上边距设为了200px。但是当我们刷新页面后,发现这个元素并没有出现在页面上,这是为什么呢?
原因其实很简单,就是因为在这个元素的上方,有其他元素所占据的空间。如果它上方的元素没有设置高度,那么这个元素的上边距就会根据文档流的规则,与上方元素的下外边距相叠加,从而导致整个元素被压住,看不见了。
那么该怎么解决这个问题呢?一种方法是给上方的元素也设置一个高度,这样就能避免两个元素的外边距叠加。另一种方法是给当前元素设置一个相对定位或者绝对定位,并且设置一个z-index值,这样就能将它置于其他元素的上方,从而展现出来了。
总之,当我们遇到CSS元素被压住看不见时,应该先检查上方元素是否有高度,并根据情况采取相应的解决措施。
粉丝
0
关注
0
收藏
0