How to solve the problem of overlaying images using CSS

I'm utilizing relative and absolute positioning but for some reason, it's not functioning correctly. Can anyone pinpoint where I've gone wrong?

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

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

This is my HTML code:

.slide-item {
  text-align: center;
  height: 400px;
  position: relative;
}

.slide-item img {
  display: block;
}

.slide-item .sale {
  position: absolute;
  top: -20px;
  right: 20px;
  display: block;
}
<div class="slide-item">
  <div class="sale">
    <img src="https://via.placeholder.com/50" alt="">
  </div>
  <img src="https://via.placeholder.com/150" class="arr-img" alt="">
</div>

htmlcss

Answer №1

Check out this code snippet...

<!DOCTYPE html>
<html>
<head>
    <style>
        .slide-item {
            text-align: center;
            height: 400px;
            position: relative;
        }

        .slide-item img:nth-child(2){
            position: relative;
            width: 1150px;
            height: 600px;
            left: 65px;
            top: 25px;
        }

        .slide-item img {
            display: block;
        }

        .slide-item .sale img {
            position: absolute;
            top: 0px;
            right: 150px;
            z-index: 1;
        }
    </style>
</head>
    <body>
    <div class="slide-item">
        <div class="sale">
            <img src="img/icons8-round-128.png" alt="">
        </div>
        <img src="img/111713927-green-screen-green-background-green-screen-stock-footage-video.jpg" class="arr-img" alt="">
    </div>
    </body>
</html>

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

Retrieving Basic HTML Source Code in UITextView Without CSS Styling Using Objective-C

I am looking to make changes to HTML text within a UITextView. The original text was created using an HTML editor in the web version of the app and needs to be edited with a default font on iOS. Here is the simple HTML code for the text that needs editing ...

androidhtmlioscssobjective-c

In my development environment, the page does not have scroll functionality, but in the production environment, it is scrollable

Whenever I open a table or any other element with overflowing content, I encounter an issue with the scrolling bar. Even though the CSS includes overflow-y: scroll;, the scroll bar on the right remains in gray and does not allow me to scroll down when the ...

javascriptcssvue.jsfrontendvuetify.js

Separate JavaScript/ASP statements using commas

I'm having trouble comma-delimiting this line in JavaScript, as I keep encountering errors: <a href="javascript:doSubmit(<%= pound & rs("AdvertiserID")%>, <%=rs("AdvertiserName")%>)"> It's Friday, what can I say... The &l ...

javascripthtmlasp-classic

Transferring data from a React file to a plain HTML page

What is the best way to transfer information from a React app to a static HTML file? For instance, if I collect data through a form in a React app.js file, how can I then send that data to a basic HTML file? ...

javascripthtmlreactjs

Pass a JavaScript variable to a PHP script using AJAX when a button is clicked, with a dynamically set href attribute

This is the current situation: There is a checkbox on each row of a table that represents some information An initially disabled button becomes enabled when any checkbox is checked The button is enclosed by an <a></a> tag as shown: <a>&l ...

javascriptphphtmljqueryajax

Arranging multi-level array with distinct keys and values

Users have the ability to add custom fields on a form. Note: I am looking for ways to streamline and organize the code more efficiently, with further explanations to follow. https://i.sstatic.net/2xMQe.jpg The HTML structure has been simplified for clar ...

phphtmlarrayssorting

Learning how to track mouse wheel scrolling using jQuery

Is there a way to track mouse scrolling using jquery or javascript? I want the initial value to be 0 and increment by 1 when scrolling down and decrement by 1 when scrolling up. The value should always be positive. For example, if I scroll down twice, the ...

javascriptjqueryhtmlcss

The xpath selector in Python/Selenium has unexpectedly ceased to function

Currently, I have a script designed to extract names from a crypto list on coinmarketcap. The function I utilize to obtain these names is as follows: num = 0 def print_name(): global num num = num + 1 if num == 100: exit() sleep(0. ...

pythonhtmlseleniumxpatherror-handling

Transform HTML elements within an *ngFor iteration based on a specific variable in Angular 4

In my current project using Angular 4, I am faced with the task of dynamically modifying HTML tags within an *ngFor loop based on a variable. Here is the code snippet that represents my approach: <mat-card-content *ngFor="let question of questionGrou ...

htmlangulartypescript

The positioning of the <thead> element does not seem to be functioning properly

I attempted to create a background for the header (thead) using a pseudo element (:after) because I wanted the background to span from one edge to another edge (including both left and right side padding). However, thead is not taking a relative position a ...

htmlcsscss-position

Python: inserting loop output into an HTML element using the embed function

My Python function generates a list that looks like this: def get_items(argument): for item in items: print item When I pass an argument to the function and print it on the terminal with "get_items(test)", I get: item1 item2 item3 Now, ...

pythonhtmlfunctionloopscgi

Employing the CSS not selector within JavaScript

I am facing an issue where my form darkens with the screen every time I click a button to show it, using JavaScript. If I were using CSS, I know I could use the :not selector, but I need guidance on how to achieve this in JS. Can anyone assist me? Below i ...

javascripthtmlcss

Cannot rearrange Font Awesome Icon

Having some trouble positioning my reply icon from Font Awesome next to my heart icon. No matter what I try, it ends up stuck in the corner of my div. I've experimented with various methods like vertical-align: middle but nothing seems to work in my c ...

jqueryhtmlcssnode.jsejs

The CSS center alignment is functioning properly on some pages, however, it seems to be malfunction

I have noticed that the CSS centering is effective on this page: However, it seems to not be working on this page: Despite both HTML pages utilizing the same CSS link, the centering issue persists on one page. Any assistance in resolving this discrepancy ...

css

When exporting to Excel from ASP.NET, the generated files cannot be opened properly in Excel Viewer

My goal is to transfer dynamic data from an ASP.NET website to Excel without using Excel XML or installing Excel on the server. I discovered that the most straightforward method is to output the data as a table and specify the type as application/vnd.ms-ex ...

asp.nethtmlexcelexport-to-excel

Personalized cursor that blinks while utilizing window.history.replaceState

While navigating between sub-pages, I utilize the window.history.replaceState method to replace URLs in my web application. However, I have noticed that my custom cursor briefly blinks (replaced by cursor: default) when the current URL is replaced with a n ...

javascripthtmlcss

Obtain a masterpiece by creating a canvas in React

Greetings! I have developed a drawing app using react and I am looking for a way to capture what the user has drawn on the canvas when they release the mouse button. This process should repeat continuously until the user stops drawing. Can anyone suggest h ...

javascriptcssreactjscanvas

Why doesn't setting the SVG viewBox to "0 0 100 100" scale my path to 100%?

My current dilemma involves an SVG path that is only displaying at 50% of its intended size. How can I adjust it to show at 100%? Below is the code snippet in question: <div className="svgPathContainer"> <svg width="100%" he ...

cssreactjssvgpathviewbox

Error Panel Style Message Format:

Currently, I am utilizing PrimeFaces, which utilizes JQuery UI not just for its functionality but also for its CSS styling framework. The issue I am facing stems from my lack of understanding about the CSS framework, as I have been unable to locate any exa ...

jquery-uicssprimefaces

Retrieve the class name from a CSS stylesheet

How can I extract all the CSS class names from a CSS file? This is what my CSS file looks like: p.juicy{ margin-left:40px; } p.csBody{ text-align:justify; } p.csCode{ font-family:"Lucida Console", Monaco, monospace; background-color:sil ...

c#css.netwinforms