چرا background-color:white; کار نمی کنه؟

کد CSS:

body{
  text-align: center;
}

span{
  background-color: white;
  z-index: 2;
}

div{
  border-top: 1px solid;
  position: absolute;
  width: 100%;
  margin-top: -8px;
  z-index: 1;
}

کد HTML:

<span>test</span>
<div></div>

اینجا رو ببینید متوجه میشید. کلا بکگراند نمی گیره نمی دونم چرا، خط افتاده روش. اگه بک گراندش سفید بشه خیلی قشنگ میشه. چی کار کنم؟

از این استفاده کنید :

body{
  text-align: center;
}

span{
  background-color: #FFFF;
  z-index: 2;
}

div{
  border-top: 1px solid;
  position: absolute;
  width: 100%;
  margin-top: -8px;
  z-index: 1;
}

مادامی که یک المنت position نداشته باشه z-index براش کار نمی کنه. پس اگه شما position: relative رو به span بدی همون چیزی رو که می خوای بهش می رسی.

span{
  position: relative;              -- added
  background-color: white;
  z-index: 2;
}

دموی آنلاین