Have position:relative but still append children to the div - CSS

inno
April 24, 2023
399 views
0 votes
2 Answers

I am trying to create a div that has a little circle on the right with an X inside it.
So far, this is what I got:

Besides the issue that the X is not inside the circle, it looks fine to me.
However, this was only achievable by making the parents position: relative.

All of this is achieved with this:

 <div id="pickedLingua">
     <template id="productrow" >
         <div style="position:relative;">
             <table style="position:absolute; top:0; left:0;" class="lingsel">
                 <tr>
                     <td style="width: 33%">
                         <p>
                             @*content from js code*@
                         </p>
                     </td>
                     <td style="width: 33%">
                         <div class="containerthing">
                             <p class="small">
                                 @*content from js code*@
                             </p>
                         </div>
                     </td>
                     <td style="width: 33%">
                         <div class="containerthing">
                             <p class="small">
                                 @*content from js code*@
                             </p>
                         </div>
                     </td>

                 </tr>
             </table>
             <div style="position:absolute; top:0; right:0" class="circle">
                 <p style="color: white;">X</p>
             </div>
         </div> 
     </template>
 </div>

But if I now add more of these templates to this list, they get added on top of one another and not below one another.

If I removed the positioning stuff, this is the result:

… But you see, the X button is now no longer overlapping anything but instead just right under each line.

I however want both: the circle overlapping the item and each item be rendered on top of each other.

How would I achieve that?

Tags: css html

Answers

You don’t need the table for layout. If you give the row a relative position, you can put the X on the top right.

.row {
  display: flex;
  border: 1px solid gray;
  padding: 10px;
  width: 50vw;
  justify-content: space-between;
  border-radius: 10px;
  margin: 10px;
  position: relative;
}

.row>div {
  background-color: lightblue;
  border-radius: 10px;
  padding: 10px;
}

.circle {
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 0.5em;
}

<div class="row">
  <div>
    Something
  </div>
  <div>
    Something
  </div>
  <div>
    Something
  </div>

  <div class="circle">
    ❌
  </div>
</div>

<div class="row">
  <div>
    Something
  </div>
  <div>
    Something
  </div>
  <div>
    Something
  </div>

  <div class="circle">
    ❌
  </div>
</div>

if you want to use table, you have to slightly changes your css

body {
  margin: 0;
  padding: 0;
}

#pickedLingua {
  width: 100%;
  height: 100%;
}

.productrow {
  width: 90%;
  position: relative;
  margin: 1em 5%;
}

.lingsel {
  width: 100%;
  background-color: lightblue;
  border-radius: 1em;
  padding: 1em 0;
}

.lingsel td {
  margin-right: 1em;
}

.lingsel td:nth-child(n+2) {
  border-radius: 1em;
  border: 1px solid #000000;
  background-color: #e6eaea;
}

.circle {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 30px;
  height: 30px;
  background-color: #000a09;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div id="pickedLingua">
  <div class="productrow">
    <table class="lingsel">
      <tr>
        <td style="width: 33%">
          <p>
            langage
          </p>
        </td>
        <td style="width: 33%">
          <div class="containerthing">
            flieBend
          </div>
        </td>
        <td style="width: 33%">
          <div class="containerthing">
            must have
          </div>
        </td>

      </tr>
    </table>
    <div class="circle">
      <p style="color: white;">X</p>
    </div>
  </div>
  <div class="productrow">
    <table class="lingsel">
      <tr>
        <td style="width: 33%">
          <p>
            langage
          </p>
        </td>
        <td style="width: 33%">
          <div class="containerthing">
            flieBend
          </div>
        </td>
        <td style="width: 33%">
          <div class="containerthing">
            must have
          </div>
        </td>

      </tr>
    </table>
    <div class="circle">
      <p style="color: white;">X</p>
    </div>
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Have position:relative but still append children to the div – CSS

Answers