title: Why button is overlapping with images in css?
body: <p>I am new to web devlopment and stuck on this issue for quite some time now.
  I wish to make a table(in 2nd col-6) with buttons at top and than changing content(scrollable cards) below it based on button click.
  I tried to implement it but my cards and buttons overlap how to tackle this and overlapping makes buttons non reactive.</p>
  <pre><code>&lt;div class=&quot;Container&quot;&gt;
     &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;col-md-6 &quot;&gt;
           &lt;div &gt; this is the table&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;col-md-6 &quot;&gt;
           &lt;div class=&quot;container&quot;&gt;
              &lt;div &gt;
                 &lt;div v-for=&quot;(eachbutton, index) in getbuttons&quot; :key=&quot;index&quot; style=&quot;color:#ffff&quot;&gt;
                    &lt;button class=&quot;tablink&quot; style=&quot;margin-bottom:12px&quot; @click=&quot;changeList(eachWidget.displayTitle)&quot; id=&quot;defaultOpen&quot;&gt;{{eachbutton.displayTitle}}&lt;/button&gt;
                 &lt;/div&gt;
              &lt;/div&gt;
              &lt;div v-for=&quot;(each, index) in getCarddata&quot; :key=&quot;index&quot; style=&quot;color:#ffff&quot;&gt;
                 &lt;div class=&quot;col-md-4 col-12 &quot; style=&quot;width: 200px; height:90px margin-top: 90px&quot;&gt;
                    &lt;div class=&quot;card mb-6&quot; style=&quot;background-color: #050b06;&quot;&gt;
                       &lt;div class=&quot;row g-0  &quot;&gt;
                          &lt;div class=&quot;col-md-6 col-6 w-100 h-100&quot;&gt;
                             &lt;img class=&quot;w-100 h-100&quot; style=&quot;margin:11px&quot; :src=&quot;each.ImageUrl&quot; alt=&quot;...&quot; /&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;col-md-6 col-6&quot;&gt;
                             &lt;p class=&quot;card-text text-episode&quot; style=&quot;text-align: left; color:#fff;&quot;&gt;
                                &lt;small class=&quot;text-muted&quot;&gt;  card&lt;/small&gt;
                             &lt;/p&gt;
                             &lt;p class=&quot;card-text text-start&quot; style=&quot;text-align: left;&quot;&gt;
                                &lt;small class=&quot;text-muted&quot;&gt;text&lt;/small
                                   &gt;
                             &lt;/p&gt;
                          &lt;/div&gt;
                       &lt;/div&gt;
                    &lt;/div&gt;
                 &lt;/div&gt;
              &lt;/div&gt;
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>