The .selected child element must be positioned above all other .child elements within the .parent container, with each .child element being contained within an absolute positioned .parent

Question

The .selected child element must be positioned above all other .child elements within the .parent container, with each .child element being contained within an absolute positioned .parent

Is it possible to ensure that a .child element with the class selected appears on top of other .child elements without changing the HTML structure and CSS position property of .child and .parent? It would be preferable if any changes made are limited to toggling child classes or styles, rather than modifying the parent. Here is the existing code:

.parent {
    position: absolute;
}
.child {
    position: relative;
}

 
<div>
    <div>
        <div class="parent">
            <div class="child selected"></div>
        </div>
        <div class="parent">
            <div class="child"></div>
        </div>
    </div>
</div>

Any insights on achieving this would be greatly appreciated. Thank you.

javascript html css css-position z-index

Answer 1

Answer №1

If you are committed to maintaining this specific HTML structure, one approach could be to hide all elements (children) and only show them when they are selected.

Alternatively, a more efficient solution would involve adding the "selected" class to the parent element, allowing you to easily adjust the z-index of the selected parent.

Below is a snippet showcasing how you can toggle the display without making changes to the HTML:

// for demonstration purposes
var toggleLayer = function() {
  var next = $('.child.selected').removeClass('selected').closest('.parent').next();
  var element = next.length ? next : $('.parent:first-child');
  element.find('.child').addClass('selected')
}

.parent {
  position: absolute;
}
.child {
  position: relative;
  display: none;
}

.selected {
 display: block;
}


/* for demonstration purposes */
.child {
  height: 100px;
  width: 100px;
  line-height: 100px;
  text-align: center;
  background: red;
}

button {
  position: fixed;
  top: 120px;
  left: 10px;
}

<div>
  <div>
    <div class="parent">
      <div class="child selected">1</div>
    </div>
    <div class="parent">
      <div class="child">2</div>
    </div>
    <div class="parent">
      <div class="child">3</div>
    </div>
    <div class="parent">
      <div class="child">4</div>
    </div>
  </div>
</div>

<!--- FOR DEMO PURPOSES --->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onClick="toggleLayer()">Toggle layer</button>

Answer 2

If you are committed to maintaining this specific HTML structure, one approach could be to hide all elements (children) and only show them when they are selected.

Alternatively, a more efficient solution would involve adding the "selected" class to the parent element, allowing you to easily adjust the z-index of the selected parent.

Below is a snippet showcasing how you can toggle the display without making changes to the HTML:

// for demonstration purposes
var toggleLayer = function() {
  var next = $('.child.selected').removeClass('selected').closest('.parent').next();
  var element = next.length ? next : $('.parent:first-child');
  element.find('.child').addClass('selected')
}

.parent {
  position: absolute;
}
.child {
  position: relative;
  display: none;
}

.selected {
 display: block;
}


/* for demonstration purposes */
.child {
  height: 100px;
  width: 100px;
  line-height: 100px;
  text-align: center;
  background: red;
}

button {
  position: fixed;
  top: 120px;
  left: 10px;
}

<div>
  <div>
    <div class="parent">
      <div class="child selected">1</div>
    </div>
    <div class="parent">
      <div class="child">2</div>
    </div>
    <div class="parent">
      <div class="child">3</div>
    </div>
    <div class="parent">
      <div class="child">4</div>
    </div>
  </div>
</div>

<!--- FOR DEMO PURPOSES --->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onClick="toggleLayer()">Toggle layer</button>

The .selected child element must be positioned above all other .child elements within the .parent container, with each .child element being contained within an absolute positioned .parent

Answer №1

Similar questions

Switch vue-multiselect on/off with the click of a button

Looking to personalize the appearance of an iframe using CSS styling?

Using mix-blend-mode with an SVG image within a colored <div>: tips for applying it to the background color of your HTML

Dropping down with Twitter Bootstrap's navbar menu

JavaScript allows users to input an array name themselves

Checking form data validity before submission in JavaScript and PHP

Sharing image using the MEAN stack

The deployment of the Firebase function encountered an issue

Modifying the user interface (UI) through the storage of data in a class variable has proven to be

How can you use CommonsChunkPlugin in Webpack to bundle multiple entries into common chunks?

Determining the optimal number of rows and columns based on an integer value

Setting the value of an input box using jQuery

Retrieving data from an external PHP script

The error code 413 payload too large was encountered when trying to process a base64 string in express,

I find it hard to understand AngularJS $scope

What makes `Why await` stand out from all the other broken promises?

Text enclosed in a bordered box, perfectly centered

Adjusting (css styles like top, left, and width) for an external occurrence within fullcalendar

Is it possible to truly halt the execution of the readline function?

Creating a mapping strategy from API call to parameters in getStaticPaths