Positioning a .png file in the center of a div while giving it a high z-index

Question

Positioning a .png file in the center of a div while giving it a high z-index

Is it possible to ensure that a .png image is always centered in a div, regardless of the device size, and appears above another .png image within the same div? Below is the HTML code snippet:

 <div class="col-sm-6">
   <div id="spinningDial">
     <img src="redphone.png" id="phone"/>
     <img src="RadialSlime.png" id="radial" class="rotate" style="width: 100%;">
   </div>
</div>

Here is the corresponding CSS:

 #phone {
      position: absolute;
      left: 67%;
      top: 45%;
      z-index: 10;
      opacity: 100%;
      width: 200px;
      }

The redphone.png represents the specific image mentioned in the requirements.

It seems that using position: absolute; combined with z-index: 10; is the only method to achieve the desired result of having the .png image appear on top of the other while staying within the same div. Using position: relative; with the same z-index causes the png to be displaced outside the div.

You can view the full source code of the webpage by visiting this link.

html css png z-index bootstrap-5

Answer 1

Answer №1

To achieve the desired effect, it is essential to add a relative position to the parent element in order to establish it as a reference point. Next, setting the top and left positions of the phone to 50% will center it within its container. However, due to discrepancies in image dimensions, the phone may not align perfectly at the center.

To address this issue, applying a transform property can adjust the positioning by halving the dimensions of the picture. The final CSS code should look like this:

#container {
      position: relative;
}

#phone {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 10;
      opacity: 100%;
      width: 200px;
}

Answer 2

To achieve the desired effect, it is essential to add a relative position to the parent element in order to establish it as a reference point. Next, setting the top and left positions of the phone to 50% will center it within its container. However, due to discrepancies in image dimensions, the phone may not align perfectly at the center.

To address this issue, applying a transform property can adjust the positioning by halving the dimensions of the picture. The final CSS code should look like this:

#container {
      position: relative;
}

#phone {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 10;
      opacity: 100%;
      width: 200px;
}

Answer 3

Answer №2

If you adjust the left and top to 50% while also adding

transform: translate(-50%, -50%);

, you can achieve the desired result:

 #phone {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
}

 <div class="col-sm-6">
   <div id="spinningDial">
     <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg" id="phone"/>
     <img src="https://cdn.i-scmp.com/sites/default/files/styles/landscape/public/d8/yp/images/shutterstock_259160825.jpg?itok=y8bw_02m" id="radial" class="rotate" style="width: 100%;">
   </div>
</div>

Answer 4

If you adjust the left and top to 50% while also adding

transform: translate(-50%, -50%);

, you can achieve the desired result:

 #phone {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
}

 <div class="col-sm-6">
   <div id="spinningDial">
     <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg" id="phone"/>
     <img src="https://cdn.i-scmp.com/sites/default/files/styles/landscape/public/d8/yp/images/shutterstock_259160825.jpg?itok=y8bw_02m" id="radial" class="rotate" style="width: 100%;">
   </div>
</div>

Positioning a .png file in the center of a div while giving it a high z-index

Answer №1

Answer №2

Similar questions

What is the best way to prevent the background-image fade effect in Chrome?

Looking to refine the search in a table for numerical values instead of strings?

Ensuring Bootstrap4 columns have a minimum height within a row

Avoiding the selection of HTML canvas objects

`Some Items Missing from Responsive Navigation Menu`

What are the ways to ensure my query columns fill the entire page space?

Try implementing toggleClass() in the accordion feature rather than addClass() and removeClass()

Issues with absolutely positioned slideshows

When deploying a website with the default Hugo theme on Netlify, I encountered a strange issue where the webpage appeared blank. Sur

Transmitting form data inputted by the user to a modal that resides in the same component, all without the need for child or parent components or

Is the p tag not becoming absolute from the bottom even when set to position: absolute?

How come the centering of a text input field in an HTML form is proving to be so difficult using the text-align: center property?

When viewing a page in IE 9 within a frame, not all CSS styles are properly rendered, causing it to enter Quirks mode

Scrolling to ID or Anchor using jQuery: Automatically scrolls to the top if already at the designated section

Troubleshooting a WordPress Blog Homepage CSS Dilemma

What is the functionality of the keydown event?

Seeking assistance with setting up checkboxes to sort through elements in an array

Different Types of Web Navigation Menus and Common Implementation Strategies

IIFE and the Twitter share button are a powerful duo

HTML allows for the creation of multiple pages within a single file