Skip to content

Commit

Permalink
Make sidebar the highest z-index possible (ampproject#6711)
Browse files Browse the repository at this point in the history
  • Loading branch information
@camelburrito
camelburrito authored Dec 16, 2016
1 parent ff2282f commit b5da32d
Show file tree
Hide file tree
Showing 2 changed files with 37 additions and 29 deletions.
62 changes: 35 additions & 27 deletions css/Z_INDEX.md
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,35 @@
selector | z-index | file
--- | --- | ---
.-amp-image-lightbox-container | 0 | extensions/amp-image-lightbox/0.1/amp-image-lightbox.css
.-amp-image-lightbox-viewer | 1 | extensions/amp-image-lightbox/0.1/amp-image-lightbox.css
.-amp-layout-size-defined > [placeholder] | 1 | css/amp.css
.-amp-loading-container | 1 | css/amp.css
.-amp-image-lightbox-viewer-image | 1 | extensions/amp-image-lightbox/0.1/amp-image-lightbox.css
.-amp-layout-size-defined > [fallback] | 1 | css/amp.css
.-amp-element > [overflow] | 2 | css/amp.css
.-amp-image-lightbox-caption | 2 | extensions/amp-image-lightbox/0.1/amp-image-lightbox.css
.amp-carousel-button | 10 | extensions/amp-carousel/0.1/amp-carousel.css
amp-sticky-ad | 11 | extensions/amp-sticky-ad/0.1/amp-sticky-ad.css
i-amp-sticky-ad-top-padding | 12 | extensions/amp-sticky-ad/0.1/amp-sticky-ad.css
amp-app-banner | 13 | extensions/amp-app-banner/0.1/amp-app-banner.css
.amp-app-banner-dismiss-button | 14 | extensions/amp-app-banner/0.1/amp-app-banner.css
i-amp-app-banner-top-padding | 15 | extensions/amp-app-banner/0.1/amp-app-banner.css
amp-image-lightbox | 1000 | extensions/amp-image-lightbox/0.1/amp-image-lightbox.css
amp-live-list > [update] | 1000 | extensions/amp-live-list/0.1/amp-live-list.css
amp-user-notification | 1000 | extensions/amp-user-notification/0.1/amp-user-notification.css
.-amp-image-lightbox-trans | 1001 | extensions/amp-image-lightbox/0.1/amp-image-lightbox.css
.-amp-sidebar-mask | 9998 | extensions/amp-sidebar/0.1/amp-sidebar.css
amp-sidebar | 9999 | extensions/amp-sidebar/0.1/amp-sidebar.css
.-amp-lbv-mask | 2147483642 | extensions/amp-lightbox-viewer/0.1/amp-lightbox-viewer.css
.amp-lightboxed | 2147483643 | extensions/amp-lightbox-viewer/0.1/amp-lightbox-viewer.css
.amp-lbv-desc-box | 2147483644 | extensions/amp-lightbox-viewer/0.1/amp-lightbox-viewer.css
.-amp-lbv-gallery | 2147483645 | extensions/amp-lightbox-viewer/0.1/amp-lightbox-viewer.css
.amp-lbv-button | 2147483646 | extensions/amp-lightbox-viewer/0.1/amp-lightbox-viewer.css
selector | z-index | file
--- | --- | ---
.-amp-image-lightbox-container | 0 | extensions/amp-image-lightbox/0.1/amp-image-lightbox.css
.-amp-loading-container | 1 | css/amp.css
.-amp-layout-size-defined > [fallback] | 1 | css/amp.css
.-amp-image-lightbox-viewer-image | 1 | extensions/amp-image-lightbox/0.1/amp-image-lightbox.css
.-amp-image-lightbox-viewer | 1 | extensions/amp-image-lightbox/0.1/amp-image-lightbox.css
.-amp-layout-size-defined > [placeholder] | 1 | css/amp.css
.-amp-image-lightbox-caption | 2 | extensions/amp-image-lightbox/0.1/amp-image-lightbox.css
.-amp-element > [overflow] | 2 | css/amp.css
.-amp-loader-moving-line | 2 | css/amp.css
.amp-carousel-button | 10 | extensions/amp-carousel/0.1/amp-carousel.css
amp-sticky-ad | 11 | extensions/amp-sticky-ad/1.0/amp-sticky-ad.css
amp-sticky-ad | 11 | extensions/amp-sticky-ad/0.1/amp-sticky-ad.css
amp-sticky-ad-top-padding | 12 | extensions/amp-sticky-ad/1.0/amp-sticky-ad.css
amp-app-banner | 13 | extensions/amp-app-banner/0.1/amp-app-banner.css
.amp-app-banner-dismiss-button | 14 | extensions/amp-app-banner/0.1/amp-app-banner.css
i-amp-app-banner-top-padding | 15 | extensions/amp-app-banner/0.1/amp-app-banner.css
amp-image-lightbox | 1000 | extensions/amp-image-lightbox/0.1/amp-image-lightbox.css
amp-user-notification | 1000 | extensions/amp-user-notification/0.1/amp-user-notification.css
amp-live-list > [update] | 1000 | extensions/amp-live-list/0.1/amp-live-list.css
amp-lightbox | 1000 | extensions/amp-lightbox/0.1/amp-lightbox.css
.-amp-lightboxed-ancestor | auto | extensions/amp-lightbox-viewer/0.1/amp-lightbox-viewer.css
.-amp-image-lightbox-trans | 1001 | extensions/amp-image-lightbox/0.1/amp-image-lightbox.css
.-amp-lbv-mask | 2147483642 | extensions/amp-lightbox-viewer/0.1/amp-lightbox-viewer.css
.amp-lightboxed | 2147483643 | extensions/amp-lightbox-viewer/0.1/amp-lightbox-viewer.css
.amp-lbv-desc-box | 2147483644 | extensions/amp-lightbox-viewer/0.1/amp-lightbox-viewer.css
.-amp-lbv-gallery | 2147483645 | extensions/amp-lightbox-viewer/0.1/amp-lightbox-viewer.css
.-amp-sidebar-mask | 2147483646 | extensions/amp-sidebar/0.1/amp-sidebar.css
.amp-lbv-button-prev | 2147483646 | extensions/amp-lightbox-viewer/0.1/amp-lightbox-viewer.css
.amp-lbv-button-next | 2147483646 | extensions/amp-lightbox-viewer/0.1/amp-lightbox-viewer.css
.amp-lbv-button-gallery | 2147483646 | extensions/amp-lightbox-viewer/0.1/amp-lightbox-viewer.css
.amp-lbv-button-back | 2147483646 | extensions/amp-lightbox-viewer/0.1/amp-lightbox-viewer.css
.amp-lbv-button-close | 2147483646 | extensions/amp-lightbox-viewer/0.1/amp-lightbox-viewer.css
amp-sidebar | 2147483647 | extensions/amp-sidebar/0.1/amp-sidebar.css
4 changes: 2 additions & 2 deletions extensions/amp-sidebar/0.1/amp-sidebar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ amp-sidebar {
outline: none;
overflow-x: hidden !important;
overflow-y: auto !important;
z-index: 9999 !important;
z-index: 2147483647 !important;
-webkit-overflow-scrolling: touch;
will-change: transform;
}
Expand Down Expand Up @@ -59,5 +59,5 @@ amp-sidebar[side] {
/* Prevent someone from making this a full-sceen image */
background-image: none !important;
background-color: #000;
z-index: 9998 !important;
z-index: 2147483646 !important;
}

0 comments on commit b5da32d

Please sign in to comment.