жёстко положение элемента в CSS для не-JavaScript пользователей

Question

У меня есть HTML-документ, который структурирован, как показано на следующем рисунке:

Красные блоки, которые представляют текст sidenotes являются помещены относительно номеров сносок в тексте, используя CSS. Если в тексте много боковин и/или тексты сидений очень длинные, перекрытия перекрываются. Чтобы предотвратить такое поведение, я использую JavaScript для установки верхнего края этих элементов, чтобы сдвинуть их вниз.

Чтобы предотвратить использование веб-сайта без включенного JavaScript, я хотел бы жестко указать верхнее значение поля для элементов, которые нужно переместить в CSS-файл. Чтобы принять во внимание различные разрешения экрана, я подумал об использовании CSS @media -query, чтобы установить различные верхние поля для других разрешений экрана.

Пример:

@media(min-width: 80em) { 
    .container { width: 40em; } 
    #sidenote-45 { margin-top: 15px; } 
    [...] 
} 

@media(min-width: 60em) { 
    .container { width: 30em; } 
    #sidenote-56 { margin-top: 28px; } 
    #sidenote-89 { margin-top: 12px; } 
    [...] 
} 

[maybe more @media-queries for other screen sizes] 

Что вы думаете о таком подходе?

Answer 1

Вы можете использовать абсолютное положение относительно контейнера, чтобы поместить примечания слева или справа от div, и если вы не установили top, то ящик находится в его положении, совпадающем с номером. Что-то вроде этого:

.container { 
 
    border: solid 2px black; 
 
    background: white; 
 
    width: 30%; 
 
    margin: 20px auto; 
 
    position: relative; 
 
} 
 

 
sup { 
 
    color: red; 
 
} 
 

 
.notes { 
 
    position: absolute; 
 
    left: -220px; 
 
    color: black; 
 
    display: block; 
 
    background: #8ac88a; 
 
    width: 200px; 
 
    font-size: 14px; 
 
    padding: 5px; 
 
    margin-top: -10px; 
 
} 
 

 
.right { 
 
    left: auto; 
 
    right: -220px; 
 
}

<div class="container"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. In dolorum voluptate provident doloremque aperiam laboriosam ea, vel nihil illum, beatae nemo mollitia possimus, velit<sup>1<span class="notes">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, et!</span></sup> sapiente nobis! Expedita possimus incidunt nam laudantium corrupti eaque, eveniet fuga perferendis, enim praesentium vero voluptatibus adipisci, dicta blanditiis aliquid asperiores accusantium. Provident voluptate explicabo necessitatibus eos sequi 
 
    modi non in nesciunt, debitis alias architecto doloremque sed<sup>2<span class="notes right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, et!</span></sup> quam voluptatem aut dolorem officia ipsa eum dicta optio delectus ullam 
 
    aliquam! Dicta rerum praesentium, laudantium suscipit earum, voluptates placeat totam aperiam non atque consequatur cupiditate neque! Reiciendis consectetur quo, alias facilis officia totam illo minus? Vitae distinctio culpa nesciunt voluptate tempore! 
 
    Error enim aperiam odio debitis culpa excepturi, minus molestias inventore amet recusandae<sup>3<span class="notes">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, et!</span></sup> fugit sit quasi qui ipsum. Aperiam quaerat tenetur, 
 
    voluptatibus eaque. Voluptatum veniam, nihil accusamus nesciunt nobis dolore cumque amet asperiores qui, ducimus iusto voluptatibus.