Widgets: Prevent currently active wide widget controls from being partially covered by another widget's controls.

The currently active widget controls should always be displayed on top.

Props audrasjb, fervillz, rinkuyadav999, jaydeep23290, ashokrd2013, melchoyce, pento, westonruter, SergeyBiryukov.
Fixes #42001.

git-svn-id: https://develop.svn.wordpress.org/trunk@47263 602fd350-edb4-49c9-b593-d223f7449a82

src/js/_enqueues/admin/widgets.js

@@ -127,8 +127,7 @@ window.wpWidgets = {
 		});
 
 		$(document.body).bind('click.widgets-toggle', function(e) {
-			var target = $(e.target),
-				css = { 'z-index': 100 },
+			var target = $(e.target), css = {},
 				widget, inside, targetWidth, widgetWidth, margin, saveButton, widgetId,
 				toggleBtn = target.closest( '.widget' ).find( '.widget-top button.widget-action' );
 
@@ -212,7 +211,7 @@ window.wpWidgets = {
 			handle: '> .widget-top > .widget-title',
 			distance: 2,
 			helper: 'clone',
-			zIndex: 100,
+			zIndex: 101,
 			containment: '#wpwrap',
 			refreshPositions: true,
 			start: function( event, ui ) {

src/wp-admin/css/widgets.css

@@ -6,6 +6,13 @@
 	box-sizing: border-box;
 }
 
+.widget.open {
+	z-index: 99;
+}
+.widget.open:focus-within {
+	z-index: 100;
+}
+
 .widget-top {
 	font-size: 13px;
 	font-weight: 600;