Skip to main content
WolfShade
WolfShade
Brainiac
May 1, 2018
Answered

Bootstrap v4 and z-index

  • May 1, 2018
  • 1 reply
  • 18692 views

Hello, all,

I'm trying to use collapse on a higher z-index than the rest of the page, so when expanded it will cover part of the page content.

However, I can't seem to get Bootstrap to co-operate with my desired design.  Upon clicking the element that expands and collapses the content, the hidden content starts out "over" the page content, but as soon as the expanding is completed it "sinks below" the page content.

How can I get the expanded content to stay "above" the page content?

V/r,

^ _ ^

This topic has been closed for replies.
Correct answer osgood_

Enough, already!  None of this bickering is helping me, any, and serves nothing.

If you don't have a suggestion to help resolve my issue, don't post.

^ _ ^


The closest youll get to anything available in Bootstrap which will do what you need is using data-toggle, without writing your own js or jquery.

Use the bootstrap class position-absolute on the div you want to toggle , the one which is activated by clicking on the 'archives' text. This will force it above the rest of the page content. Be aware the absolutely positioned div must be inside a parent container with the bootstrap class position-relative.

Once you have that set up you can put as many data-toggle divs in it as you want.

The dropdown solution of yesterday will not work as Bootstrap deavtivates it when you click anywhere inside of it hence the reason why you cant choose to show another embedded dropdown.

1 reply

Nancy OShea
Nancy OShea
Community Expert
May 1, 2018

Sounds like what you really want is a Modal window to overlay the entire screen.

<div class="container">

  <h2>Modal Example</h2>

  <!-- Button to Open the Modal -->

  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">

    Open modal

  </button>

  <!-- The Modal -->

  <div class="modal fade" id="myModal">

    <div class="modal-dialog">

      <div class="modal-content">

     

        <!-- Modal Header -->

        <div class="modal-header">

          <h4 class="modal-title">Modal Heading</h4>

          <button type="button" class="close" data-dismiss="modal">&times;</button>

        </div>

       

        <!-- Modal body -->

        <div class="modal-body">

          Modal body..

        </div>

       

        <!-- Modal footer -->

        <div class="modal-footer">

          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

        </div>

       

      </div>

    </div>

  </div>

 

</div>

Nancy O'Shea— Product User, Community Expert & Moderator
WolfShade
WolfShadeAuthor
Brainiac
May 1, 2018

Like a modal, but no dark background, no preventing other links from being clicked, not centered but actually starting just over the point where the click to expand exists.

V/r,

^ _ ^

Nancy OShea
Nancy OShea
Community Expert
May 1, 2018

That's called a Popover.

Nancy O'Shea— Product User, Community Expert & Moderator
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices