Как выделить элементы в документе не испортив вёрстку?

Question

[onevetka]

Передо мной стоит задача выделять элементы на холсте, эти выделители могут пересекаться. То есть на одном элементе может быть два выделителя.

Первое, что пришло в голову это outline solid.
Это свойство не меняет положение, очень ненавязчиво выделяет нужные элементы.

Его проблема в том, что при выделение одного элемента двумя выделителями, не получается сделать два цвета одновременно.



Это можно сделать через border. Но он ломает верстку сайтов, когда его применяешь к некоторым элементам

Есть ещё вариант с псевдоэлементом, но для этого нужно, чтобы изначальный элемент был position: relative. А они могут быть absolute и может сломаться верстка

Answer 1

[profesor08]

Контейнеру задай position: relative/absolute; и изолируй его isolation: isolate;, а псевдоэлементу задай фон градиентом из двух цветов и помести на нижний слой z-index: -1.

Comments

[onevetka]

Большое спасибо за помощь

Этот вариант как раз то, что нужно

.container::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;

  border: 10px solid;
  border-image-slice: 1;
  border-width: 2px;

  border-image-source: linear-gradient(to left, #743ad5, #d53a9d);
}

[onevetka]

Прошу прощения. Это сначала показалось идеальным решением, но проблема в том, что этот подход не может выделять элементы, если у них явно не задан position. То есть половина элементов просто не обводится

[profesor08]

onevetka, для .container position: relative надо задавать же

[onevetka]

Ну вот, я про это и говорю. То есть надо затрагивать позишн искомых элементов. Можно ли это сделать, не завтрагивая?
Ведь они могут быть fixed или absolute, или вообще не назначены

[profesor08]

onevetka, задай если не назначено, по другому никак.

Answer 2

[Владимир Ясанкин]

Выделяй элементы не меняя их, а с помощью элементов выделителей помещая их
на соответствующие элементы.
В качестве выделителей можно использовать div (пустые, нo с рамкой разного цвета).
Предположим выделяем кликом мыши. По клику мыши определяем координаты кликнутого объекта и его размеры. Div присваеем значения position:absolute top,left,height,width, z-index

Comments

[onevetka]

Как их можно поместить на элементы?