Maintain position:relative while adding child elements to the div

I am currently working on creating a div that includes a small circle on the right side with an X inside it. Here is my progress so far:

https://i.sstatic.net/3r2Nl.png

Although the X is not yet placed inside the circle as intended, overall it looks good to me. One issue I encountered was needing to set the parent element's position to relative in order to achieve this layout.

All of the above code accomplishes this design structure:

<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>

However, when adding more templates to the list, they end up overlapping each other instead of being rendered below one another.

If I remove the positioning styles, the result looks like this:

https://i.sstatic.net/XSH2M.png

The X button no longer overlaps anything but sits directly underneath each line instead.

My goal is to have both the circle overlapping the item and each item rendering on top of each other. How can I accomplish this?

Answer №1

if you wish to incorporate a table, you will need to make some adjustments to 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>
            language
          </p>
        </td>
        <td style="width: 33%">
          <div class="containerthing">
            flexible
          </div>
        </td>
        <td style="width: 33%">
          <div class="containerthing">
            essential
          </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>
            language
          </p>
        </td>
        <td style="width: 33%">
          <div class="containerthing">
            flexible
          </div>
        </td>
        <td style="width: 33%">
          <div class="containerthing">
            essential
          </div>
        </td>

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

Answer №2

Using tables for layout is unnecessary. By giving the row a relative position, you can easily place the X on the top right corner.

.row {
  display: flex;
  border: 1px solid gray;
  padding: 10px;
  width: 50%;
  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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Fixing the vertical centering of content when printing HTML

My bootstrap 4-based HTML page is looking good on most screens, but when I try to print it, the content is vertically centered in the print layout. How can I ensure that the content is displayed at the top of the paper? https://i.sstatic.net/kfjrx.png Be ...

Using Typescript in React to render font colors with specific styling

Attempting to utilize a variable to set the font color within a react component, encountering an error with my <span>: Type '{ style: "color:yellow"; }' is not assignable to type 'HTMLProps<HTMLSpanElement>' The use of yel ...

Reposition all other elements of the HTML body after collapsing the Bootstrap section

I am facing an issue with Bootstrap where every time I click on a collapse element, the rest of the body moves up or down. Is there a way to prevent this from happening? Here is an example of my code: <body> <div class="panel-group"> ...

What is the process for ensuring that the "ng-multiselect-dropdown" is a mandatory field within Angular 7?

Is there a way to require the ng-multiselect-dropdown field to have at least one selected item? <ng-multiselect-dropdown [placeholder]="'Select countries'" [data]="countries" [(ngModel)]="countriesSelectedItems" [settings]="co ...

The issue of overflow-y not functioning properly in conjunction with ng-repeat has been observed

As indicated in this resource, setting a fixed height for the div is suggested, but it seems like it's not working with the code provided below. <div style="margin-top:0.5vh;"> <div style="height:200px;border:1px solid red;overflow:au ...

What is the limitation of including a string constant with "</script>" inside a <script> block?

I am genuinely curious about this: I thought that the following code would be valid within an HTML document: <script> var test = "<script>why? </script>"; </script> However, it turns out that this leads to an "unterminated str ...

How can I adjust the position of a circular progress bar using media queries?

My code involves creating a circular progress bar. However, I am facing an issue where the circles stack on top of each other when I resize the window, as shown in the output screenshot. I want to ensure that the position of the 3 circles remains fixed whe ...

Navigating Joomla with a Menu specifically designed for articles within a specific category

After recently starting to navigate Joomla, I've hit a roadblock with a seemingly simple task. I have multiple articles, each belonging to a specific category. My goal is to create a menu that displays all articles within a chosen category. When sele ...

Maximizing the number of divs arranged horizontally in HTML while utilizing the full line width

My website consists of several fixed-width div elements that are styled to flow inline using the display type inline-block. This layout creates empty space at the end of the line where subsequent div elements cannot be accommodated and have to wrap to the ...

Changing HTML tags programmatically in Angular while inheriting a template

In my project, I have a Component called DataGrid that represents a table with expandable rows. Each row can be expanded to show a child DataGrid table, which is similar to the parent DataGrid component. To simplify this setup, I created a base class DataG ...

Button to scroll down

I have successfully implemented a #scrolldownbutton that scrolls to the first component. However, I am now attempting to modify it so that when the button is clicked, the page smoothly scrolls within the viewport and stops at the partially visible componen ...

How to Retrieve HTML Content from an Azure Function Using C#

I created an Azure function using C# that generates HTML content. However, when I access it from a web browser, the response is displayed as plain text instead of rendering as HTML. After some research, it seems like I need to define the ContentType header ...

What is the reason for my website page topic being positioned behind the navbar in Bootstrap?

When I click on the navbar, I expect to see the topic displayed beside it, but instead, it is appearing below the navbar. I've tried adding margins, but that hasn't resolved the issue. Can someone help me with finding a solution? This is how my ...

Enhance the appearance of React.Fragment with custom styling

When working with React, my components adhere to a specific file structure schema: - componentName |- componentName.tsx |- componentName.scss Some of these components are wrapped with a <React.Fragment>, like this: render() { return ( &l ...

Ways to update row background color based on specific column values

I need to customize the background color of my table rows based on the value in the "Category" column. For example: Name Category Subcategory A Paid B C Received D If the Category value is 'Paid', I want the ro ...

Customizing the CSS of the TinyMCE editor within a React application

Incorporating TinyMCE 5 into my React project has been an interesting challenge. I'm looking to personalize the editor by adjusting elements like borders and adding box shadows to the toolbar. Despite attempting to add CSS through the content_css prop ...

Empowering user accessibility through intricate custom elements

In the world of web accessibility guidelines, labels are typically associated with form controls like <input> or <textarea>. But what happens when dealing with complex Angular / React / ... components that function as form controls? Picture a ...

Adjust the background color of children based on the parent's mouseover event

Seeking a solution to fill three bars with varying percentages: <div class="bars" style="width:0%; background-color: red;"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </ ...

Removing an unnecessary DIV element from an HTML Document

I have been working on a News application and am utilizing a web product to fetch News Headlines. When I request a NewsHeadline, the product sends back an HTML Code containing the News Headline. <div class="mydiv"> <script type="text/javascript ...

Issues persisting with the fixed header functionality in Bootstrap table

I implemented a table using bootstrap-table in my project. Everything seems to be working fine except for the scroll bar within the tbody. For some reason, the scroll bar is not appearing. Can anyone point out what I might be missing? I believe that if th ...