Skip to content
GitLab
    • Explore Projects Groups Snippets
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Merge requests
  • !21027
An error occurred while fetching the assigned milestone of the selected merge_request.

Document zindex

  • Review changes

  • Download
  • Email patches
  • Plain diff
Merged Mark Otto requested to merge document-zindex into v4-dev 8 years ago
  • Overview 0
  • Commits 2
  • Pipelines 0
  • Changes 3

Fixes #18532 (closed).

Also rearranges the Sass variables and renames the modal backdrop z-index variable from -bg to -backdrop so that it's more accurate.

Compare
  • v4-dev (base)

and
  • latest version
    115a37db
    2 commits, 2 years ago

3 files
+ 24
- 4

    Preferences

    File browser
    Compare changes
docs/‎layout‎
overv‎iew.md‎ +20 -0
sc‎ss‎
_moda‎l.scss‎ +1 -1
_variab‎les.scss‎ +3 -3
docs/layout/overview.md
+ 20
- 0
  • View file @ 115a37db

  • Edit in single-file editor

  • Open in Web IDE


@@ -155,3 +155,23 @@ The Sass mixin for the above example look like that shown beneath:
{% highlight scss %}
@include media-breakpoint-between(md, lg) { ... }
{% endhighlight %}
## Z-index
Several Bootstrap components utilize `z-index`, the CSS property that helps control layout by providing a third axis to arrange content. We utilize a default z-index scale in Bootstrap that's been designed to properly layer navigation, tooltips and popovers, modals, and more.
We don't encourage customization of these values; should you change one, you likely need to change them all.
```scss
$zindex-dropdown-backdrop: 990 !default;
$zindex-navbar: 1000 !default;
$zindex-dropdown: 1000 !default;
$zindex-navbar-fixed: 1030 !default;
$zindex-navbar-sticky: 1030 !default;
$zindex-modal-backdrop: 1040 !default;
$zindex-modal: 1050 !default;
$zindex-popover: 1060 !default;
$zindex-tooltip: 1070 !default;
```
Background elements—like the backdrops that allow click-dismissing—tend to reside on a lower `z-index`s, while navigation and popovers utilize higher `z-index`s to ensure they overlay surrounding content.
scss/_modal.scss
+ 1
- 1
  • View file @ 115a37db

  • Edit in single-file editor

  • Open in Web IDE


@@ -64,7 +64,7 @@
right: 0;
bottom: 0;
left: 0;
z-index: $zindex-modal-bg;
z-index: $zindex-modal-backdrop;
background-color: $modal-backdrop-bg;
// Fade for backdrop
scss/_variables.scss
+ 3
- 3
  • View file @ 115a37db

  • Edit in single-file editor

  • Open in Web IDE


@@ -526,12 +526,12 @@ $dropdown-header-color: $gray-light !default;
$zindex-dropdown-backdrop: 990 !default;
$zindex-navbar: 1000 !default;
$zindex-dropdown: 1000 !default;
$zindex-popover: 1060 !default;
$zindex-tooltip: 1070 !default;
$zindex-navbar-fixed: 1030 !default;
$zindex-navbar-sticky: 1030 !default;
$zindex-modal-bg: 1040 !default;
$zindex-modal-backdrop: 1040 !default;
$zindex-modal: 1050 !default;
$zindex-popover: 1060 !default;
$zindex-tooltip: 1070 !default;
// 16. Navbar
0 Assignees
None
Assign to
0 Reviewers
None
Request review from
Labels
0
None
0
None
    Assign labels
  • Manage project labels

Milestone
No milestone
None
None
Time tracking
No estimate or time spent
Lock merge request
Unlocked
0
0 participants
Reference:
Source branch: document-zindex

Menu

Explore Projects Groups Snippets