Tips for positioning a div relative to another div while controlling its z-index

Question

Tips for positioning a div relative to another div while controlling its z-index

Hey there, take a look at the image below https://i.sstatic.net/zYiaY.png

The issue I'm facing is quite common - I have div 1 and div 2 visible in a loop, but divs 3 are hidden. When div 2 is clicked on, everything is great so far. However, what I want is for div 3 to adjust itself to the best available position, whether that be to the right, top, or bottom if there's no space on the left side. Essentially, I want it to auto-adjust like the title of something in default settings.

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

Please disregard the colors. What I've attempted is something like this:

<div> // div1
    <div> //div2
        <div class='div3'> //div 3
        </div>
    </div>
</div>

CSS

.div3 {position:absolute;right:0px;}

I would appreciate any suggestions or insights on this matter.

javascript jquery css html

Answer 1

Answer №1

It seems like you might be facing this issue, right?
The gray tiles are positioned behind the black ones. Take a look:

.div1 {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: #222;
}
.div2 {
  position: absolute;
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: #ee2;
  top: 60%;
  left: 60%;
}
.div3 {
  position: absolute;
  width: 50%;
  height: 50%;
  display: inline-block;
  background-color: gray;
  left: 100%;
  top: 80%;
}

<div class="div1">
  <div class="div2"></div>
  <div class="div3"></div>
</div>
<div class="div1">
  <div class="div2"></div>
  <div class="div3"></div>
</div>

<div class="div1">
  <div class="div2"></div>
  <div class="div3"></div>
</div>

The solution is quite simple: If you include a z-index greater than 1, it will be resolved.
I have set a z-index of 5.

.div1 {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: #222;
}
.div2 {
  position: absolute;
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: #ee2;
  top: 60%;
  left: 60%;
}
.div3 {
  position: absolute;
  width: 50%;
  height: 50%;
  display: inline-block;
  background-color: gray;
  left: 100%;
  top: 80%;
  z-index: 5;
}

<div class="div1">
  <div class="div2"></div>
  <div class="div3"></div>
</div>
<div class="div1">
  <div class="div2"></div>
  <div class="div3"></div>
</div>

<div class="div1">
  <div class="div2"></div>
  <div class="div3"></div>
</div>

Answer 2

It seems like you might be facing this issue, right?
The gray tiles are positioned behind the black ones. Take a look:

.div1 {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: #222;
}
.div2 {
  position: absolute;
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: #ee2;
  top: 60%;
  left: 60%;
}
.div3 {
  position: absolute;
  width: 50%;
  height: 50%;
  display: inline-block;
  background-color: gray;
  left: 100%;
  top: 80%;
}

<div class="div1">
  <div class="div2"></div>
  <div class="div3"></div>
</div>
<div class="div1">
  <div class="div2"></div>
  <div class="div3"></div>
</div>

<div class="div1">
  <div class="div2"></div>
  <div class="div3"></div>
</div>

The solution is quite simple: If you include a z-index greater than 1, it will be resolved.
I have set a z-index of 5.

.div1 {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: #222;
}
.div2 {
  position: absolute;
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: #ee2;
  top: 60%;
  left: 60%;
}
.div3 {
  position: absolute;
  width: 50%;
  height: 50%;
  display: inline-block;
  background-color: gray;
  left: 100%;
  top: 80%;
  z-index: 5;
}

<div class="div1">
  <div class="div2"></div>
  <div class="div3"></div>
</div>
<div class="div1">
  <div class="div2"></div>
  <div class="div3"></div>
</div>

<div class="div1">
  <div class="div2"></div>
  <div class="div3"></div>
</div>

Tips for positioning a div relative to another div while controlling its z-index

Answer №1

Similar questions

What is the process for sending in individual rows?

Concerns with the performance of Leaflet's polyline

Learn the Method Used by Digg to Eliminate "&x=0&y=0" from their Search Results URL

Learn how to style inline HTML elements, such as headings, labels, input fields, and buttons, which are typically displayed as block elements

What is the best way to send an HTML form variable to a Perl script using AJAX?

Ensure the navbar includes the .container class and insert an extra dropdown right next to the container without causing any misalignment

Having trouble with a JQuery selector not functioning properly when trying to select a class in the HTML that contains a

Tips for integrating CSS keyframes in MUI v5 (using emotion)

Troublesome issue with the Focus() function in JavaScript

Guidelines for showcasing validation summary on an ASP.NET webpage with the help of Javascript

What is the best way to determine which section of a promise chain is responsible for an error in Javascript?

When utilizing custom modules in Node.js, is it more effective to require the module from within a function or at the top of the script?

Can AJAX code be applied to elements with identical IDs and checked individually?

Simple HTML and CSS exercise for beginners to grasp the concept

What techniques can be employed to minimize the volume of text within my HTML code?

I require varying numbers of columns on each row based on the breakpoint in Bootstrap4

JavaScript queries in Selenium WebDriver

Remove CSS Styling from DataFrames in Pandas

Starting the Android System Magnifier with a Click: A Step-by-Step Guide

What could be causing the Bootstrap collapse feature to malfunction?