Математика Javascript рисует прямоугольники вокруг нескольких других прямоугольников для достижения эффекта фона

Вы слишком много думаете! То, что вы ищете, может быть достигнуто с помощью определенного макета HTML и CSS.

Вы должны использовать макет, подобный этому:

.container
    .overlay
    .box
    .box
    .box
    .box

Хитрость заключается в использовании полупрозрачного наложения во всю ширину и переносе элементов, которые необходимо выделить, на передний план. Очень важно присвоить оверлею pointer-events: none, чтобы вы могли кликать по нему!

Заставьте .box иметь значение z-index, скажем, 1, а .overlay иметь значение z-index 100. Чтобы выделить определенный .box, установите его z-index на 101. Таким образом, он будет выделен.

Сейчас я пользуюсь мобильным телефоном, но я разместил базовую проверку концепции на Codepen. Нажмите на поля, чтобы выделить их, нажмите еще раз, чтобы отменить. Работает с несколькими ящиками!

Вы можете решить эту проблему проще, используя тень.

Затем вам нужно только сегментировать экран на 2 части

body, html {
   height: 100%; 
 }

body {
    background-image: linear-gradient(45deg, yellow, tomato);
}
.mask {
    overflow: hidden;
    width: 50%; 
    height: 100%; 
    display: inline-block;
    position: relative;
}

#mask1 {
    left: 0px;
}

#mask2 {
    right: 0px;
}

.hole {
    width: 150px; 
    height: 90px;
    position: absolute;
    box-shadow: 0px 0px 0px 2000px rgba(0,0,0,0.5);
}

#mask1 .hole {
    left: 40px;
    top: 40px;
}

#mask2 .hole {
    left: 140px;
    top: 20px;
}

<div class="mask" id="mask1">
    <div class="hole"></div>
</div><div class="mask" id="mask2">
    <div class="hole"></div>
</div>    

Рассмотрите возможность использования регионов

Хотя здесь есть несколько хороших ответов, и вы, возможно, захотите рассмотреть возможность перемещения элементов, подобных предложенным @WearyAdventurer, ни один из других ответов на самом деле не отвечает на исходный вопрос:

Как создать элементы таким образом, чтобы они окружали другие элементы?

Ответ на этот вопрос лучше всего решить с помощью типа данных, который называется Region. Области позволяют легко выполнять операции с наборами, используя фрагменты двухмерного экранного пространства: объединить эту область с той областью, а затем вычесть другую область, а затем превратить результат в набор прямоугольников, которые я могу визуализировать. Регионы существуют в большинстве оконных систем (среди прочих, MS Windows, X Windows, классическая MacOS) и интенсивно используются во внутренней механике большинства браузеров для рендеринга элементов, но на удивление они отсутствуют в JavaScript.

Или их не было, пока я не написал для этого библиотеку.

Лежащая в основе логика регионов несколько сложна. Есть много крайних случаев, и обработка всех сценариев, которые могут возникнуть, может быть сложной задачей. В моей реализации Region2D используются непересекающиеся строки (полосы) непересекающихся прямоугольников (одномерные области), это то же самое, что и многие серверы X Windows. В других реализациях используются алгоритмы пространственного разбиения, а в третьих (например, в современной MacOS) вместо областей вообще используются пути или методы рендеринга полигонов.

Основная идея

Независимо от того, какую реализацию вы используете, основная идея остается неизменной. В вашем случае вы начинаете с большого прямоугольника, который покрывает экран, а затем просто вычитаете два (или три, или четыре, или любые другие) прямоугольники, которые вы хотите, а затем спрашиваете область, какие прямоугольники получаются в результате этих операций. В JavaScript с использованием моей библиотеки Region2D это выглядит так:

var screenRegion = new Region([0, 0, viewportWidth, viewportHeight]);
var elemRegion1 = new Region(element1);
var elemRegion2 = new Region(element2);
var coverRegion = screenRegion.subtract(elemRegion1).subtract(elemRegion2);
var coverRectangles = coverRegion.getRects();

Результирующий массив прямоугольников — это простые объекты, которые имеют координаты x / y / width / height / top / left / right / bottom, поэтому вы просто создаете <div> элементов из каждого, и все готово.

Рабочая реализация

Итак, вот рабочая реализация решения актуальной проблемы в том виде, как она представлена, с использованием моей библиотеки Region2D для выполнения сложной алгоритмической работы:

// Generate regions for each of the objects.
var containerRegion = new Region2D($(".container")[0]);
var target1Region = new Region2D($(".target1")[0]);
var target2Region = new Region2D($(".target2")[0]);

// Subtract the targets from the container, and make an array of rectangles from it.
var coverRegion = containerRegion.subtract(target1Region).subtract(target2Region);
var coverRects = coverRegion.getRects();

// Create gray <div> elements for each rectangle.
for (var i = 0, l = coverRects.length; i < l; i++) {
    var coverRect = coverRects[i];
    var coverElement = $("<div class='cover'>");
    coverElement.css({
        left: (coverRect.x - 1) + "px", top: (coverRect.y - 1) + "px",
        width: coverRect.width + "px", height: coverRect.height + "px"
    });
    coverElement.appendTo($(".container"));
}

.container, .target1, .target2, .cover { position: absolute; top: 0; left: 0; box-sizing: border-box; }
.target1, .target2 { border: 1px solid red; }
.container { width: 330px; height: 230px; border: 1px solid blue; }
.target1 { top: 40px; left: 40px; width: 100px; height: 80px; }
.target2 { top: 100px; left: 180px; width: 100px; height: 80px; }
.cover { background: rgba(0, 0, 0, 0.5); border: 1px solid #000; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/plain/region2d.min.js"></script>

<div class="container">
    <div class="target1"></div>
    <div class="target2"></div>
</div>