how to set html element with position absolute not transparent?

Question

My element X its like transparent becouse de position absolute , can it change?

   .X{
        background-color: black;
        position: absolute;
        left: 47.2%;
        color:white;
        top:0%;
        padding: 0.1rem;
        
        height: 3rem;
        font-size: 3rem;
        font-weight: 700;
    }



 <section style="border:solid 0.1rem black; height: 600px;position:relative;border-collapse:collapse; margin-top:1rem ">
            <div class="X">
             X 
            </div>

this is how look now and this is how i would want to look no edges going through it

....................

Answer 1

You just have to use z-index and give a higher value to your .X div like z-index:1.

The value can be higher depending on your existing CSS structure

A working snippet below

.X {
  position: absolute;
  left: 47.2%;
  color: black;
  top: 0%;
  padding: 0.1rem;
  height: 3rem;
  font-size: 3rem;
  font-weight: 700;
  padding: 10px;
  border: 1px solid black;
  border-top: none;
  background: white;
  z-index: 1
}

section {
  border: solid 0.1rem black;
  height: 600px;
  position: relative;
  border-collapse: collapse;
  margin-top: 1rem
}

.part {
  position: absolute;
  border: 1px solid black;
  left: 52%;
  height: 100%
}

<section>
  <div class="X">
    X
  </div>
  <div class="part"></div>
</section>