Tips for positioning an image absolutely in relation to another image

#content {
  border: 2px blue solid;
  width: 100%;
}

#gallery {
  display:flex;
  align-items: center;
  justify-content: center;
}

#gallery > #large-photo {
  width:70%;
  margin: 20px 0px;
  border: 3px red solid;
}

#small-photo {
  position: absolute;
  width:150px;
  left:0px;
}
<div id="content">
    <div id="gallery">
        <img src="image/test.jpg" id="large-photo">
        <img src="image/sale.jpg" id="small-photo">
    </div> 
</div>

Here is the code provided. The goal is to have the large image centered within the photo gallery and the small image set to absolute positioning relative to the large image.

How can this be achieved?

Currently, the small image is positioned relative to the main content div.

htmlcss

Answer №1

If you want to achieve the desired layout, make sure to include an additional div element.

#main {
  border: 2px blue solid;
  width: 100%;
}

#photo {
  display: flex;
  align-items: center;
  justify-content: center;
}

#photo > #photo-center {
  width: 70%;
  position: relative;
  margin: 20px 0px;
  border: 3px red solid;
}

#large{
  width: 100%;
}

#small{
  width: 150px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
<div id="main">
    <div id="photo">
        <div id="photo-center">
            <img src="http://blog.jimdo.com/wp-content/uploads/2014/01/tree-247122.jpg" id="large">
            <img src="http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg" id="small">
        </div>
    </div>
</div>

Answer №2

Have you considered setting your main image as the background of #photo and then positioning the smaller image inside that container?

#photo {
    background-image: url(primary.jpg);
    position: relative;
}
#photo > img {
    position: absolute;
}

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

The hover effect on MUI TableRows is being overshadowed by the background color of the TableCell

I'm currently using @mui/material version ^5.10.1. My challenge is applying the TableRow hover behavior as outlined in the documentation. However, I have also set a background color for the first TableCell in each row, which ends up overriding the ho ...

cssreactjsmaterial-uihovertablerow

Center an image vertically and horizontally within a div element inside a container, even if the image sizes and aspect ratio differ, while also including padding

I am looking to vertically align images with varying ratios, where the image may be larger or smaller than the content and also include padding; I have tried different solutions found here, but none seem to cover all my requirements; I specifically need i ...

css

Teaching etiquette to the students of Li

I'm having trouble getting two lists to display correctly on my website. I want one main navigation list that is horizontal and another sub navigation list that is vertical. To achieve this, I need to have two different classes for the list items in m ...

htmlcsshtml-lists

Creating stylish pricing cards with Bootstrap

I am struggling to create 3 pricing cards in a row with equal width and height, along with positioning the sign-up button at the bottom of each card regardless of the amount of text. I have attempted various methods but have not been successful. Can som ...

htmlcssbootstrap-4bootstrap-cards

Discover the size of an image using JavaScript by accessing innerHTML

I'm currently working on a unique AJAX function that retrieves image URLs without using node append for insertion. Instead, I opted to utilize innerHTML, but this has posed challenges in accurately obtaining the file dimensions. My current approach i ...

javascripthtmlajax

The script for tracking cursor coordinates is incompatible with other JavaScript code

<html> <script language="javascript"> document.onmousemove=function(evt) { evt = (evt || event); document.getElementById('x').value = evt.clientX; document.getElementById('y').value = evt.clientY; document.ge ...

javascripthtmlbrowser

Guide on attaching an arrow to a div card

I have a lineup of cards displayed in a horizontal row. By scrolling left or right, I can navigate through the rest of the cards. By selecting a card, it expands to reveal a small panel that drops down with an arrow pointing towards it. As I continue to ...

htmlcss

Having trouble applying custom CSS styles to images in CarouselItem using Reactstrap? Learn how to use a div instead of an image for a solution

Currently, I am utilizing reactstrap in my live website powered by react.js. I am seeking assistance on how to implement the reactstrap carousel. Specifically, I am struggling with applying CSS directly to the image within CarouselItem. Since there is a s ...

cssimagecarouselbootstrap-4reactstrap

height issue with a div

I currently have a header, master container, and footer set up on my website. Within the master container, I have 2 separate containers: A on the left and B on the right. Even as the B container gets filled up, the A container remains static. Is there a ...

css

Concealed Separator for Text Elements in HTML

I am in search of a method to distinguish certain specific strings within HTML code. Although I can recognize the desired strings, they may also appear as part of longer strings throughout the document. In order to locate them, I currently insert a special ...

htmlnon-printing-characters

What is the process for displaying the editor logo icon as a preview in files when the "default open program" is set to Atom?

For instance: When I designate Visual Studio as the default program for opening 'hello.js' files, Windows displays a preview icon like this: https://i.sstatic.net/qIbv0.png However, when I change the default program to Windows Notepad, I see: ...

javascripthtmlcsswebatom-editor

JavaScript - Validate select boxes for distinct values

I have been searching for a solution to ensure that each select box on my form has a unique value before submitting it to the database. The select boxes are named in the format of operator_address_type_0, operator_address_type_1, and so on. I am looking f ...

javascripthtml

The cart icon mysteriously vanishes on mobile devices and the footer is not displaying correctly on the product pages

Working with my friend to set up a WP online store. Inquiry: The Cart icon displays correctly on desktop but not on mobile. The theme does not seem to have an option to activate it for mobile devices. Website: meikuclothing.com I've tried using var ...

csswordpresswoocommerce

Removing dropdown lists from input forms can be achieved without using jQuery by utilizing vanilla JavaScript

Looking to build a custom HTML/JavaScript terminal or shell. Interested in utilizing an input box and form to interact with JavaScript functions/commands. Unsure of how to eliminate the drop-down menu that appears after previous inputs. Pictured terminal: ...

javascriptjqueryhtml

"Steady layout of grid for the navigation bar and

Currently, I am in the process of developing a control panel with the use of HTML and CSS. To structure the page, I opted for a grid layout. However, I encountered an issue where the navbar and sidebar do not stay fixed on the screen despite trying various ...

javascripthtmlcss

Customize bullet list icons to adjust in size based on content using css

In my CMS project, the CMS team has a special requirement regarding unordered and ordered lists. They want the size of the bullet list icon to adjust according to the text content within the list. The image below shows the default design of a list item: ...

javascriptjqueryhtmlcss

Achieving a full-width navigation element allows for other elements to be positioned below it, rather than directly beside it

Apologies for my not-so-great English. To better understand my issue, please refer to this fiddle and this fiddle. Focus on the <nav></nav> section. If there are only a few elements in the menu, the next block <section></section> ...

htmlcss

What could be the reason behind Google and Bing's mobile-friendly tests inaccurately flagging my site as non-mobile friendly?

Our website for resources is responsive and has been thoroughly tested on various real smartphones, including iPhone, Android, and Windows devices. It looks great on every phone we've tested it on. You can visit the resources website here: The site ...

cssmobile

Enhance your design with Bootstrap 4's innovative spacing

Recently started using Bootstrap. Here's the HTML code I have. How can I achieve consistent spacing between all my box elements without causing any of them to wrap on larger screens like laptops and desktops? In the past, I would use CSS-grid for this ...

htmlcsswebbootstrap-4frontend

The Bootstrap 4 grid appears to be malfunctioning as the columns are not displaying next to each other as expected

I've implemented the code below in an attempt to achieve the desired layout shown in the image, but instead, I'm getting a different outcome. Can someone help me figure out what I might be doing wrong with the Boostrap 4 grid system? I'm co ...

cssbootstrap-4