Images overlaying text and each other in a cascading arrangement

I need help arranging an icon with a number on top in the left corner of a div container, alongside an image to the right. While it displays correctly on desktop, the mobile view overlaps the image on the right and the text on the left.

Here is a snippet of the HTML code:

                        <div class="col-1">
                            <div class="wrap-image">
                            <a
                                th:rowNumber="${status.count}" th:href="@{'/basket/remove/' + ${product.id}}">
                                <img src="images/bin.png" height="60">
                                <span z-index: 10;>[[${status.count}]]</span>
                            </a>
                            </div>

                    </div>
                    <div class="col-3">
                        <img th:src="@{${product.mainImagePath}}" class="img-fluid" />
                    </div>

This is the CSS style used:

.wrap-image {
  position: relative;
  width: min-content;
}

.wrap-image span {
  position: absolute;
  top: 1px;
  left: 20px;
}

View the device issue here: device

Another device view: device2

Compare with PC view: desktop

The overlap might be due to incorrect sizing of the main image for mobile devices. Unsure how to adjust this properly.

htmlcssimagebootstrap-4

Answer №1

To ensure proper positioning at the top of the container, consider utilizing the following CSS code:

.wrap-image {
  position: relative;
  width: min-content;
  top: 0px;
  right: 30px;
}

.wrap-image span {
  position: absolute;
  top: 0px;
  right: 30px;
}

You may also need to wrap the larger image (found in the second div) for optimal display.

Answer №2

To ensure your span is displayed above your image, apply the z-index: 10; property to it and establish a new rule for .wrap-image with the position: relative; attribute.

Using z-index allows for layering, ensuring elements are placed in front of one another. When utilizing absolute positioning, it's important to set the parent element's position as relative so that the absolute positioning is based off of the parent container rather than the next relatively positioned element or the body if no others are defined.

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

Getting the string value from a table row using JavaScript

I need to capture the value of result_status from the row labeled status. If all values in the row labeled status are 'pass', then the result_status will also be 'pass'. However, if any one of the values in the row labeled status is &a ...

javascripthtmlajax

Having trouble aligning image and expanding video to fit the screen in a NextJS application

I need help with: centering the image above the waitlist sign up scaling the background video in a relative way to fill the screen regardless of browser size This is the relevant part of index.js: import Head from 'next/head' import Image from ...

cssreactjsnext.js

What is the best way to create a full-width bottom menu for my app using HTML and CSS?

I encountered an issue with the bottom navbar menu on the mobile version of my website. It appears as an app-like bottom menu and looks great on most devices except for those with a 320px width size. In these cases, the navbar does not stretch to fill the ...

htmlcssbootstrap-4

Unsure about the erratic actions of my JavaScript code

My current challenge involves a function that aims to return a global variable as a String object, containing the contents of a local text file. As it stands, this function is returning an empty String. function fetchWords() { var fileRequest = new XM ...

javascripthtml

Tips for organizing list items in a grid format using CSS and HTML

In my div block, the width is not fixed. Inside the div, there is a list block with 11 items that I want to display evenly like this: ##item## ##item## ##item## ##item## ##item## ##item## ##item## ##item## ##item## ##item## ##item## I&a ...

htmlcss

Enlargen div or unordered list according to content exceeding limits

What is the best way to ensure a div expands when it contains a lot of content? Code Example (HTML): <div class="content"> Content goes here <br /> Content goes here <br /> Content goes here <br /> Content goes her ...

jqueryhtmlcssxhtml

What is the best way to eliminate the extra space in my svg using CSS?

Is there a way to remove the unwanted spaces around this SVG image in my HTML document using CSS? The image has some red borders indicating the areas with excessive spacing. Here is a screenshot link for reference: https://i.sstatic.net/GYBH2.png The stru ...

htmlcsssvg

Angular 6: Issue TS2339 - The attribute 'value' is not recognized on the 'HTMLElement' type

I have a textarea on my website that allows users to submit comments. I want to automatically capture the date and time when the comment is submitted, and then save it in a JSON format along with the added comment: After a comment is submitted, I would li ...

javascriptangularhtmltypescriptangular6

Issue with jQuery Cycle causing images not to load in IE all at once, leading to blinking

When using the jQuery Cycle plugin in IE8 (as well as other versions of Internet Explorer), I am encountering an issue. My slideshow consists of 3 slides, each containing a Title, Description, and Image. The problem arises when viewing the slideshow in I ...

javascriptjqueryhtmlcsscycle

My carousel navigation buttons are unresponsive in Bootstrap 4

Here's my code. I'm attempting to create an image carousel with button controls, but the images are not transitioning smoothly as intended. Additionally, the buttons seem to be unresponsive. <div class="carousel slide" id="cservices" data-ri ...

htmltwitter-bootstrapbootstrap-4

Submitting an Ajax form with validated input elements

My form is designed to collect various information through text boxes, with some of them requiring a specific pattern like only accepting numbers. To add validation, I utilized the pattern attribute in the input fields. You can find more information about ...

javascriptjqueryhtmlajaxforms

Utilizing AJAX and JavaScript to parse JSON data that includes an array

I'm encountering an issue while trying to parse a JSON message received through an AJAX response on my webpage. Strangely, it keeps throwing the following error: "SyntaxError: JSON.parse: expected ',' or ']' after array eleme ...

javascripthtmljsonajax

Aligning text to the bottom of a scrollable container

I am currently working on creating a web panel that will display console output. My issue arises when I try to position the console output at the bottom of the page - it seems like I need to use absolute positioning for this. So far, I haven't found a ...

htmlcss

Placing a link parallel to a dropdown menu item in Bootstrap 4

I am looking to add a separate link to a dropdown menu item for a "What's this?" option. While there are previous solutions for bootstrap3 using html list syntax (<li> and such), the current syntax for dropdown menus is slightly different: < ...

bootstrap-4

How can I insert a item into an Array using JavaScript code?

My instructor set up an array in my JavaScript file that is off limits for me to modify. My task is to add new objects to it through code without directly manipulating the existing array. Here's a snapshot of what my array contains: const words = [{ ...

javascripthtmlcssarraysobject

Use JavaScript to overlay drawings onto an existing image

Within this particular image, I possess a compilation of pixel coordinates outlining the polygon segments that encompass all the objects contained within it (refer to the image provided below). For example, in relation to the individual, there exists a li ...

javascriptjqueryhtmlimagecanvas

Eliminate the table background in a single cell

Apologies if the title is not very descriptive, I couldn't find the right words to use. Below is the table in question. https://i.sstatic.net/LHwbG.png I'm looking to remove the white border (background of the table) from just the upper-left ce ...

css

Adjust the position if the height exceeds 100 pixels

Can someone help with this code issue? $(document).ready(function () { if ($('.pi-img').height() > 100) { $(this).css('top' , '30%'); console.log('yeah'); } }); I am encountering difficu ...

javascriptjquerycsshtml

Update the FontSize in the HTML dropdown menu using JavaScript

I am having trouble filling my Selection using a script. For example, when I try to populate my FontSizeMenu, I use the following code snippet: function FillFontSizeMenu() { FillSelection(GetPossibleFontSizes(), "fontSizeMenu"); } function GetPossib ...

javascriptjqueryhtmldrop-down-menuselection

Steps to center the search form in the navbar and make it expand in Bootstrap 5

I'm utilizing Bootstrap v5.1.3 and have included a navbar as shown below: navbar Here is the code for that implementation: <div class="container"> <nav class="navbar navbar-expand-lg navbar-light bg-light& ...

csstwitter-bootstrapnavbarbootstrap-5search-form