Итак, у меня интересная ситуация. У меня есть столбец динамически расположенных элементов div, которые выглядят так:
![enter image description here](https://i.stack.imgur.com/Eb9NL.png)
Каждый из этих элементов представляет собой следующий компонент:
const Comment = ({
id,
onClick,
onClose,
body,
posX,
posY,
offsetY,
activeRange,
}) => {
return (
<CommentWrapper
isActive={isActive}
style={{
position: 'absolute',
top: `${posY - offsetY}px`,
}}
>
<CommentBody onClick={onClick}>
<CommentText>{body}</CommentText>
</CommentBody>
<Icon
type='close'
onClick={onClose}
style={{ position: 'absolute', right: '10px' }}
/>
</CommentWrapper>
)
}
Таким образом, по сути, каждый из этих компонентов расположен абсолютно внутри контейнера вертикального столбца, исходя из их posY - offsetY
, где posY
- это вертикальная позиция комментария к документу, а offset
- это расстояние от верхней части Контейнер комментария в верхней части документа (это учитывает прокрутку).
Причина, по которой эти компоненты абсолютно расположены, состоит в том, что мне нужно, чтобы они соответствовали указанным c расположениям на странице. Однако проблема, когда два компонента генерируются с одинаковым вертикальным положением на странице, эти компоненты перекрываются. Однако в идеале я хотел бы, чтобы они распространялись так, чтобы ни один из них не перекрывался, но они также остаются близкими к их posY
(поскольку причина абсолютной позиции заключается в том, что эти комментарии по существу служат метками для текста слева от них и таким образом, они должны быть рядом с их соответствующими источниками).
Сначала я хотел динамически проверить, не перекрываются ли какие-либо комментарии с использованием их ограничивающих строк, но это кажется очень дорогим подходом, учитывая, что мне нужно будет выполнить итерацию и затем сравнивайте каждую позицию с каждой другой позицией, поэтому мне было интересно, есть ли лучший способ добиться этого.
Спасибо!