Having trouble making z-index work on a child div with absolute positioning

Question

Having trouble making z-index work on a child div with absolute positioning

I am attempting to design a ribbon with a triangle div positioned below its parent div named Cart.

<div class="rectangle">
  <ul class="dropdown-menu font_Size_12" role="menu" aria-labelledby="menu1" style="min-width: 100px; z-index: 0">
    <li role="presentation">
       <a role="menuitem" tabindex="-1" href="#">Sign in </a>
    </li>
    <li role="presentation">
       <a rolw="menuitem" tabindex="-1" href="#">View Cart</a>
    </li>
  </ul>
  <!-- Ribbon side-fold (left and right) -->
  <div class="triangle-l triangle-left-pos"></div>
  <div class="triangle-r triangle-right-pos"></div>
</div>

Check out the JS Fiddle here My issue is that the child div is not aligning under the parent div. In the fiddle, the div appears above even though I have set the z-index lower than the parent div.

Edit: Including an image for reference on where the child div should be located.

jquery html css twitter-bootstrap-3 css-shapes

Answer 1

Answer №1

Stacking contexts behave like a single unit within the parent stacking context.

The parent element with class .rectangle has established a stacking context, meaning that the children elements' z-index values are resolved within this context and cannot be placed beneath their parent.

If you adjust the z-index property of the .rectangle element, and assign negative z-index values to the children, they can be positioned as desired. This is because both the parent and children belong to the same stacking context (#root in your demo), and using negative z-index values allows the children to remain below the parent in the z-axis.

Keep in mind that if you apply a CSS3 transform or an opacity transition to the parent element, a new stacking context will be created, resulting in a rendering similar to what you see in your demo.

Reference: The stacking context

Answer 2

Stacking contexts behave like a single unit within the parent stacking context.

The parent element with class .rectangle has established a stacking context, meaning that the children elements' z-index values are resolved within this context and cannot be placed beneath their parent.

If you adjust the z-index property of the .rectangle element, and assign negative z-index values to the children, they can be positioned as desired. This is because both the parent and children belong to the same stacking context (#root in your demo), and using negative z-index values allows the children to remain below the parent in the z-axis.

Keep in mind that if you apply a CSS3 transform or an opacity transition to the parent element, a new stacking context will be created, resulting in a rendering similar to what you see in your demo.

Reference: The stacking context

Answer 3

Answer №2

Are you seeking this particular solution See it in action here ?

To achieve the desired effect, simply remove the top values from both .triangle-left-pos and triangle-left-pos.

Answer 4

Are you seeking this particular solution See it in action here ?

To achieve the desired effect, simply remove the top values from both .triangle-left-pos and triangle-left-pos.

Answer 5

Answer №3

The current approach you are taking is not feasible unless you modify your HTML structure.

For more information on CSS Position, please refer to the documentation: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context

However, the desired outcome is achievable. Please take a look at the example in this fiddle: https://jsfiddle.net/nileshmahaja/7coznt7o/

HTML

<div class="rectangle-wrap">
<div class="rectangle">
                            <h2 class="dropdown-toggle" data-toggle="dropdown">
                                Cart <i class="icon-shopping-cart"></i> <b class="caret"></b>
                            </h2>
                            <ul class="dropdown-menu font_Size_12" role="menu" aria-labelledby="menu1" style="min-width: 100px; z-index: 0">
                                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sign in </a></li>
                                <li role="presentation"><a rolw="menuitem" tabindex="-1" href="#">View Cart</a></li>
                            </ul>
    <!-- Ribbon side-fold (left and right) -->
                        </div></div>

css

.rectangle-wrap{
    position:relative;
    width:200px;
    height:32px;
}
.rectangle {
    background: none repeat scroll 0 0 #de8a03;
    float: left;
    width:200px;
    height: 32px;
    position: relative;
    top: 0;
    z-index: 2;
}


.rectangle  h2 {
    font-size: 14px;
    color: #ffffff;
    margin-top: 10px;
    text-align: center;
}

.rectangle-wrap:before {
    border-color: transparent #332619 transparent transparent;
    border-style: solid;
    border-width: 10px 10px 10px 10px;
    content:'';
    position:absolute;
    left:-10px;
    bottom:-10px;
}


.rectangle-wrap:after {
    border-color: transparent transparent transparent #332619;
    border-style: solid;
    border-width: 10px 10px 10px 10px;
    content:'';
    position:absolute;
    right:-10px;
    top:-10px;
    z-index:0
}

Answer 6

The current approach you are taking is not feasible unless you modify your HTML structure.

For more information on CSS Position, please refer to the documentation: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context

However, the desired outcome is achievable. Please take a look at the example in this fiddle: https://jsfiddle.net/nileshmahaja/7coznt7o/

HTML

<div class="rectangle-wrap">
<div class="rectangle">
                            <h2 class="dropdown-toggle" data-toggle="dropdown">
                                Cart <i class="icon-shopping-cart"></i> <b class="caret"></b>
                            </h2>
                            <ul class="dropdown-menu font_Size_12" role="menu" aria-labelledby="menu1" style="min-width: 100px; z-index: 0">
                                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sign in </a></li>
                                <li role="presentation"><a rolw="menuitem" tabindex="-1" href="#">View Cart</a></li>
                            </ul>
    <!-- Ribbon side-fold (left and right) -->
                        </div></div>

css

.rectangle-wrap{
    position:relative;
    width:200px;
    height:32px;
}
.rectangle {
    background: none repeat scroll 0 0 #de8a03;
    float: left;
    width:200px;
    height: 32px;
    position: relative;
    top: 0;
    z-index: 2;
}


.rectangle  h2 {
    font-size: 14px;
    color: #ffffff;
    margin-top: 10px;
    text-align: center;
}

.rectangle-wrap:before {
    border-color: transparent #332619 transparent transparent;
    border-style: solid;
    border-width: 10px 10px 10px 10px;
    content:'';
    position:absolute;
    left:-10px;
    bottom:-10px;
}


.rectangle-wrap:after {
    border-color: transparent transparent transparent #332619;
    border-style: solid;
    border-width: 10px 10px 10px 10px;
    content:'';
    position:absolute;
    right:-10px;
    top:-10px;
    z-index:0
}

Having trouble making z-index work on a child div with absolute positioning

Answer №1

Answer №2

Answer №3

Similar questions

CSS selectors duplication can cause confusion and make code harder to maintain. SCSS

Having trouble getting Jquery Ajax Post to work properly when using JinJa Templating?

I rely on the angular-responsive-carousel library for my project, but unfortunately, I am unable to customize the arrow and dots

Placing a new item following each occurrence of 'X' in React components

Tips for stopping automatic scrolling (universal solution)

What is causing the slideDown animation to initially transition into slideUp animation?

A Comprehensive Guide on Creating an Expansive HTML Textbox Covering the Entire

The issue with Angular-gettext is that it fails to update dynamically generated strings in the code

What is the reason for the initial DOM operation taking significantly longer than subsequent ones?

Click to reveal sliding menu bar

Guide to create a sliding menu transition from the viewport to the header

Something seems off with Chrome

Incorporating JSON data seamlessly into a visually appealing Highcharts pie chart

Having multiple HTML select elements and utilizing jQuery AJAX

Footer division misbehaving

Guide to transforming Tailwind CSS into a class and saving it in a CSS document

The $watchCollection function will consistently have the identical object assigned to both the new and old values

Does the padding and margin of an element alter when the position is set to relative?

Error message: The color shade "100" is not in the color palette. The only available shades are primary, accent, and contrast

Problem with IE off-canvas scrolling