CSS Grid overlay

In this sample, we demonstrate how you can dynamically place the overlay using the CSS Grid. Since you do not need to do pixel calculation, you can easily shift the location of the overlay.

Code

/* CSS */
.overlayTop
{
    -ms-grid-row-align: start;
}

.overlayCenter
{
    -ms-grid-row-align: center;
}

/* JavaScript */
function scenario3Top() {
    sdkSample.displayStatus("Top");
    var overlay = document.getElementById("scenario3Overlay");
    overlay.className = "overlay overlayTop";
}

function scenario3Mid() {
    sdkSample.displayStatus("Medium");
    var overlay = document.getElementById("scenario3Overlay");
    overlay.className = "overlay overlayCenter";
}

function scenario3Original() {
    sdkSample.displayStatus("Bottom");
    var overlay = document.getElementById("scenario3Overlay");
    overlay.className = "overlay";
}

Top Middle Original