What is the best way to utilize CSS relative positioning for aligning two rows of information on a webpage?

Question

What is the best way to utilize CSS relative positioning for aligning two rows of information on a webpage?

What is the best way to use relative positioning to show two lines of information on an image without the order of information interfering with each other?

I want the Files badge to appear at the bottom of the image, with the MusicBrainz and Discogs badges above it. Both Files and MusicBrainz should align at the left side of the image. The height is correct, but unfortunately, the badges are displayed from left to right in the order they are added. I'm not sure how to resolve this issue.

Additionally, I'm confused about why the hyperlink below the image is correctly aligned, but doesn't shift over to the right.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div style="display:grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));grid-gap: 5px;">
  <div>
    <figure class="figure">
      <a href="FixSongsReport00398_byartistalbum00004_00001.html">
        <img src="../images/aElXsWl4r3Qd8Vr3aSYnHg==_thumbnail.jpg" class="figure-img" width="200" height="200">
      </a>
      <figcaption class="badge badge-success" style="position: relative;left: +1em; top: -5.5em;">
        MusicBrainz
      </figcaption>
      <figcaption class="badge badge-success" style="position: relative;left: +1em; top: -5.5em;">
        Discogs
      </figcaption>
      <figcaption class="badge badge-primary" style="position: relative;left: +1em; top: -3.5em;">
        9 files
      </figcaption>
      <figcaption class="figure-caption" style="position: relative;top: -2em;">
        <a href="FixSongsReport00398_byartistalbum00004_00001.html">
                        Nelson; Reed; Dupré; Gigout; Wills; Widor; Grainger; Karg-Elert; Weinberger: Pomp & Pipes!
                    </a>
      </figcaption>
    </figure>
  </div>
</div>

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

html css bootstrap-4

Answer 1

Answer №1

Based on the information provided, I will attempt to address your query. While there may be more refined solutions available, I aim to provide a concise response without delving into the semantics of the elements. It is advisable to utilize classes instead of tag names for the CSS selectors outlined below. My goal is to simplify the answer as much as possible.

Considering that all "figcaption" tags are at the same level, one method to control them independently is by using the following CSS:

figcaption {
  position: absolute;
}

Absolute positioning of elements is in relation to a parent with a specified position. Therefore, a position must be assigned to the figure:

.figure {
  position: relative;
}

By setting the position, you can adjust the badges using the top and left properties as required. An example can be viewed here.

However, a drawback of the previous solution is the manual control needed for the second green badge. To address this issue, consider grouping the badges within a div element:

<div class="badges-line">
  <figcaption...
  <figcaption...
</div>
<div class="badges-line">
  <figcaption...
</div>

Adjust the CSS selectors accordingly after implementing the div classes.

Additionally, an alternative approach is to utilize float (an entirely new suggestion). By increasing the margin of the second green badge, the blue badge will float to the next line when space is insufficient on the right. For a visual demonstration, modify the margin value from 0.2em to 0.4em in this example.

Both solutions may require refinement, and I recommend considering a tag other than figcaption for the badges, as it may not align with semantic correctness (yet this is a separate discussion).

Answer 2

Based on the information provided, I will attempt to address your query. While there may be more refined solutions available, I aim to provide a concise response without delving into the semantics of the elements. It is advisable to utilize classes instead of tag names for the CSS selectors outlined below. My goal is to simplify the answer as much as possible.

Considering that all "figcaption" tags are at the same level, one method to control them independently is by using the following CSS:

figcaption {
  position: absolute;
}

Absolute positioning of elements is in relation to a parent with a specified position. Therefore, a position must be assigned to the figure:

.figure {
  position: relative;
}

By setting the position, you can adjust the badges using the top and left properties as required. An example can be viewed here.

However, a drawback of the previous solution is the manual control needed for the second green badge. To address this issue, consider grouping the badges within a div element:

<div class="badges-line">
  <figcaption...
  <figcaption...
</div>
<div class="badges-line">
  <figcaption...
</div>

Adjust the CSS selectors accordingly after implementing the div classes.

Additionally, an alternative approach is to utilize float (an entirely new suggestion). By increasing the margin of the second green badge, the blue badge will float to the next line when space is insufficient on the right. For a visual demonstration, modify the margin value from 0.2em to 0.4em in this example.

Both solutions may require refinement, and I recommend considering a tag other than figcaption for the badges, as it may not align with semantic correctness (yet this is a separate discussion).

Answer 3

Answer №2

If I have interpreted your message correctly, here is the strategy I would suggest.

Group all the elements with "overlaps" into a single container (div) to simplify your handling of them.
Apply position: absolute to this container to prevent it from affecting the layout of other elements. In essence, while position: relative allows elements to be moved, the browser keeps their original position, causing other elements to flow around them (learn more here). Note that in this scenario, the image's "container" (.figure) should have position: relative added to it.

I have also relocated the link .figure-caption outside of .figure because I believe it is preferable for the image "container" to only contain images and "floating" elements, not "static" ones like links.

Here is my recommendation:

.figure {
  position: relative;
  width: 200px;
}

.figure .badges {
  position: absolute;
  left: 0;
  bottom: 20px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div style="display:grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));grid-gap: 5px;">
  <div class="item">
    <figure class="figure">
      <a href="FixSongsReport00398_byartistalbum00004_00001.html">
        <img src="../images/aElXsWl4r3Qd8Vr3aSYnHg==_thumbnail.jpg" class="figure-img" width="200" height="200">
      </a>
      <div class="badges">
        <figcaption class="badge badge-success">
          MusicBrainz
        </figcaption>
        <figcaption class="badge badge-success">
          Discogs
        </figcaption>
        <figcaption class="badge badge-primary">
          9 files
        </figcaption>
      </div>
    </figure>
    <figcaption class="figure-caption">
      <a href="FixSongsReport00398_byartistalbum00004_00001.html">
            Nelson; Reed; Dupré; Gigout; Wills; Widor; Grainger; Karg-Elert; Weinberger: Pomp &amp; Pipes!
      </a>
    </figcaption>
  </div>
</div>

https://jsbin.com/godaqal/2/edit?html,css,output

If there are any unclear points, please feel free to let me know.

Answer 4

If I have interpreted your message correctly, here is the strategy I would suggest.

Group all the elements with "overlaps" into a single container (div) to simplify your handling of them.
Apply position: absolute to this container to prevent it from affecting the layout of other elements. In essence, while position: relative allows elements to be moved, the browser keeps their original position, causing other elements to flow around them (learn more here). Note that in this scenario, the image's "container" (.figure) should have position: relative added to it.

I have also relocated the link .figure-caption outside of .figure because I believe it is preferable for the image "container" to only contain images and "floating" elements, not "static" ones like links.

Here is my recommendation:

.figure {
  position: relative;
  width: 200px;
}

.figure .badges {
  position: absolute;
  left: 0;
  bottom: 20px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div style="display:grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));grid-gap: 5px;">
  <div class="item">
    <figure class="figure">
      <a href="FixSongsReport00398_byartistalbum00004_00001.html">
        <img src="../images/aElXsWl4r3Qd8Vr3aSYnHg==_thumbnail.jpg" class="figure-img" width="200" height="200">
      </a>
      <div class="badges">
        <figcaption class="badge badge-success">
          MusicBrainz
        </figcaption>
        <figcaption class="badge badge-success">
          Discogs
        </figcaption>
        <figcaption class="badge badge-primary">
          9 files
        </figcaption>
      </div>
    </figure>
    <figcaption class="figure-caption">
      <a href="FixSongsReport00398_byartistalbum00004_00001.html">
            Nelson; Reed; Dupré; Gigout; Wills; Widor; Grainger; Karg-Elert; Weinberger: Pomp &amp; Pipes!
      </a>
    </figcaption>
  </div>
</div>

https://jsbin.com/godaqal/2/edit?html,css,output

If there are any unclear points, please feel free to let me know.

What is the best way to utilize CSS relative positioning for aligning two rows of information on a webpage?

Answer №1

Answer №2

Similar questions

How to perfectly align a full-width div with a div of specific width

Error: The Android Phonegap framework encountered an issue when trying to access the getDuration function without a properly initialized media

Divergent Bootstrap layouts for different devices

Something seems to be preventing Div from appearing and there are no error messages appearing

Ways to align a div in relation to a span element?

The Parallax effect reference hook does not seem to be functioning properly with components in NextJs

What steps should I take to ensure that this website is responsive across all screen sizes?

The variable in my scope is not reflecting the changes in the HTML view

Ways to stop custom Mailchimp form from redirecting upon submission

Updating divs automatically using Ajax without refreshing the page is not functioning as intended

Tips for adjusting the wrapper css rule of a Tabs component to left-align text in a vertical tab within Material-UI

Is there a way to prevent all attribute menu items within a ul/li List from being clicked when one of them has already been selected

What is the best way to retrieve the input value from post.ejs?

What is the best way to choose the initial p tag from an HTML document encoded as a string?

Complete a checkbox entry form and showcase it within a "division" on the current page

Creating a table in VueJs and populating it with values retrieved from an MSSQL database in a .NET Core web application

Utilizing Bootstrap Columns for Image Alignment: Struggling to Position an Image in the Center

Conceal the nearest parent element above using JavaScript (or jQuery)

Guide on transferring control from a successful jQuery event to an HTML form

Looking for an effective method to implement CSS styling within a list cell in JavaFX?