Combining two images using HTML and CSS resulted in conflicts when attempting to overlay any additional elements

I have managed to overlay two images successfully, but I am experiencing conflicts when trying to do the same with other div images. Here is the code on jsfiddle: https://jsfiddle.net/cLew1t2v/ and here is the code snippet:

<div>
    <div style="position:relative;">
         <img src="http://getfreedeals.co.in/wp-content/uploads/2012/08/get-Toaster-worth-Rs.350-free-on-purchase-of-Rs.275-worth-of-frying-pan.jpg" style="position:absolute; top: 0px; left: 0px; z-index: 1;">
         <img src="http://lh3.ggpht.com/-9_zNrpUMkQo/VMDgzXMlX4I/AAAAAAAAAS8/HY4BkO70fB0/s1600/images.jpeg" style="position:absolute; top: 220px; left: 20px; z-index: 3;">

    </div>
</div>
 <div>
      <div style="position:relative;">
         <img src="http://getfreedeals.co.in/wp-content/uploads/2012/08/get-Toaster-worth-Rs.350-free-on-purchase-of-Rs.275-worth-of-frying-pan.jpg" style="position:absolute; top: 0px; left: 0px; z-index: 1;">
         <img src="http://lh3.ggpht.com/-9_zNrpUMkQo/VMDgzXMlX4I/AAAAAAAAAS8/HY4BkO70fB0/s1600/images.jpeg" style="position:absolute; top: 220px; left: 20px; z-index: 3;">

    </div>

</div>
htmlcss

Answer №1

When all selectors within a div with the CSS property position: relative are positioned absolutely, its height will be reduced to 0.

To ensure inline elements and set dimensions for the box, you can define width, height, and float attributes accordingly.

.relative-box{
  position:relative; 
  height: 350px; 
  width: 320px; 
  float: left;
  margin: 0 10px;
}
<div class="relative-box">
   <img  src="image-url-here-1">
   <img  src="image-url-here-2" style="position:absolute; top: 220px; left: 20px; z-index: 3;">

</div>;

<div class="relative-box">
   <img  src="image-url-here-1">
   <img  src="image-url-here-2" style="position:absolute; top: 220px; left: 20px; z-index: 3;">

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

Guide to verify the user selection within a select form

Here is a form with a select field: <form method="post" name="posting_txt" onSubmit="return blank_post_check();" id="post_txt"> <select style="background: transparent; border-bottom:5px;" name="subname" class="required"> ...

javascriptjqueryhtmlajaxjquery-plugins

Ensuring that the second level unordered list is set to a height of 100% of the first unordered list, rather than the

I'm working with this menu http://codepen.io/alexandernst/pen/oxpGYQ (I wanted to include it here but the result viewer on SO is causing some display issues...) and I am trying to ensure that the second and third level ul elements are the same height ...

htmlcss

Accordion symbol for adding or subtracting

Looking for a way to change the Toggle text in my angular 7 application accordion to images or content displaying a + sign for collapse and - for expand. I need to achieve this using CSS in my SCSS stylesheet so that I can later change the color of the sig ...

htmlcssangularsass

Is there a way to give only the left corners of a button a rounded look?

Here is the visual representation of the button: https://i.stack.imgur.com/Bjlkp.png ...

htmlcss

"Conceal and reveal dynamic content using the power of jQuery's

Hello everyone, I'm encountering an issue with this code where I am trying to display a variable in the content. Take a look at the code below: I am attempting to show the variable $name in the div #divToToggle upon clicking, but the variable does no ...

htmlcssajax

Is there a way to position the button on the right side rather than the center using a negative right Y value?

I'm looking for something that: Has a button on the right side, not just beside the input. The current setup involves using an unattractive width: 138%, which doesn't consistently work across different browsers and devices. The button ends up a ...

htmlcssbootstrap-5

Identify the specific element using a designated data attribute

Having trouble figuring out how to select a specific element with a particular data attribute. In my situation, I want to target the a element with class="zoom-image" and data-order-item-id="<?=$order_item_id ?>". Here is the HTML/PHP code snippet ( ...

javascriptjqueryhtml

What is the best way to toggle an element's visibility using the select tag?

Let me break down the issue for you. In my HTML code, I have a select element that looks like this: <select id="seasons" multiple="multiple"> <option value="s01">Season 1</option> <option value="s02">Season 2</option> ...

javascripthtmljqueryhtml-select

Modify the size of a div based on the status of a checkbox using only HTML and CSS

Here is a small project that I created using only HTML & CSS. The goal is to modify the properties of the <div class="pro"> when the checkbox is checked. When this happens, all other <div class="pro"> elements should be hidden and the <art ...

htmlcsscheckbox

The options that are not selected in a dropdown menu will not be added to a different dropdown menu

In my application, I have 2 select boxes. When the user submits the page, only the selected students in the first select box #studentadd are appended to the second select box #studentselect. However, the unselected options from #studentadd do not get appen ...

phpjqueryhtmlajaxmysqli

Having issues with Div CSS functionality not properly functioning

My background CSS is working fine, but the styling for the .about div is not applying. Here is my HTML code: <DOCTYPE! HTML> <head> <link rel="stylesheet" type="text/css" href="CSS.css"> </head> <body> ...

csshtml

Generating values in a loop - mastering the art of creating data points

My goal is to create a variable within a loop: box-shadow: 835px 1456px #FFF, 1272px 796px #FFF, 574px 1357px #FFFand so on... The concept is simple: box-shadow: x1 y1 #fff, x2 y2 #fff, x3 y3 #fff, x4 y4 #fff ... xn yn #fff. I attempted to achieve this ...

cssless

Step-by-step guide: Crafting an UP Arrow solely with HTML and CSS

What is the method to utilize solely HTML and CSS for creating a triangle? I am in need of constructing a thick triangle, but want to achieve this using only CSS So far, I have experimented with the following code: .arrow-up { width: 0; height: 0 ...

htmlcss

The browser fails to implement styling prior to a demanding workload

Is it possible to refresh a section of my webpage that contains numerous DOM elements? My ideal approach would be to hide the section using visibility: hidden;, then redraw it, and finally set visibility back to visible;. However, I've encountered an ...

javascripthtmlcssgoogle-chromedom

Is it possible to examine elements within Outlook?

Creating HTML emails can be quite the challenge, especially when trying to make them compatible with Outlook. Is there a method to inspect elements in Outlook similar to how we do on a browser's console? ...

htmlemailhtml-emailemail-client

What is the best way to customize the link style for individual data links within a Highcharts network graph?

I am currently working on creating a Network Graph that visualizes relationships between devices and individuals in an Internet of Things environment. The data for the graph is extracted from a database, including information about the sender and receiver ...

javascriptcsschartshighcharts

Is there a way to use JQuery to make one button trigger distinct actions in two different divs?

For instance: Press a button - one div flies off the screen while another div flies in. Press the button again - Same div flies out, other div returns. I'm completely new to Javascript/JQuery so any assistance would be highly appreciated! Thank you ...

javascriptjqueryhtmlcss

The svh/lvh units are experiencing unexpected issues when using Chrome on an iPhone

I'm facing an issue with my hero section that is supposed to take up the full height of the viewport. I recently tried using the new svh/lvh units, which seemed to work fine on desktop and Safari for mobile. However, when testing on Chrome for mobile ...

cssnext.jsmobilematerial-uiviewport

`Can you provide instructions on modifying CSS using JavaScript once the window size reaches a specified threshold?`

Is there a way to use JavaScript to automatically adjust the font size when the screen reaches 1050px? ...

javascripthtmlcss

Experience the ultimate Safari/iOS responsive design for seamless browsing on all

I am experiencing an issue with my website. In my "toggle device" toolbar, I selected the responsive option for iPhone 7 Plus, Galaxy 8, and others. While my website looks good on some devices, it does not function as desired when opened on an iPhone (7+/ ...

iosiphonecssresponsive