Размещение элемента div (с элементами div внутри него, имеющими действия при наведении курсора мыши) поверх других элеме ⇐ CSS

[Anonymous]

У меня есть страница, на которой на данный момент... около 30 элементов div, и тот, над которым я сейчас работаю, продолжает отображаться в левом нижнем углу и случайным образом размещает все содержимое вокруг элемента div. Вот код, который у меня есть на данный момент для стилизации и HTML:Я не могу хоть убей понять, почему он не отображается там, где должен на странице, и почему содержимое внутри него не будет загружаться правильно. Приношу извинения за, возможно, неправильную публикацию кода, я все еще изучаю SO и заранее благодарю за любой вклад/понимание.
Я пробовал выполнить наведение курсора в CSS, и это только кажется чтобы работало, когда я помещаю его прямо в HTML (это происходит в другой части моего сайта), и я пытался изменить верхний/левый процент, z-индекс и все, что я мог найти здесь, чтобы помочь.
Я ожидаю, что div выровняйте то место, где введенные мной проценты поместят его и содержимое внутри него, чтобы он работал как список, в котором при наведении появляется больше контента, а затем при нажатии на него ссылается на другую страницу.


.cell {
display: block;
position: absolute;
width: var(--cell-size);
height: var(--cell-size);
border: var;
border-radius: 0px;
overflow: var;
cursor: move;
box-shadow: var;
overflow-x: var;
overflow-y: var;
transition: all 0.8s ease;
z-index: var;
set-draggable: true;
padding: 0;
}```

#cell23 {
display: visible;
top: 72%;
left: 8%;
height: 40%;
width: 20%;
background: tansparent;
font-size: 12pt;
font-weight: bold;
color: #000000;
font: verdana;
font-size: 12pt;
font-weight: bold;
border-radius: 24%;
box-shadow: 0 0 16px rgba(255, 255, 255, 0.8);
border: 1px dotted #E6E6FA;
text-shadow: 2px 2px 4px #ffffff;
z-index: 8;
overflow: scroll;
y-overflow: scroll;
}

#hide23 {
display: none;
top: 72%;
left: 48%;
height: 24%;
width: 24%;
background: tansparent;
color: #000000;
font: verdana;
font-size: 12pt;
font-weight: bold;
border-radius: 24%;
background-size: 200%;
box-shadow: 0 0 16px rgba(255, 255, 255, 0.8);
border: 1px dotted #E6E6FA;
text-shadow: 2px 2px 4px #ffffff;
z-index: 3;
overflow: scroll;
y-overflow: scroll;
}

#cell23:hover + #hide23 {
display: block;
}

#cell24 {
display: visible;
top: 72%;
left: 8%;
height: 40%;
width: 40%;
background: tansparent;
font-size: 12pt;
font-weight: bold;
color: #000000;
font: verdana;
font-size: 12pt;
font-weight: bold;
border-radius: 24%;
box-shadow: 0 0 16px rgba(255, 255, 255, 0.8);
border: 1px dotted #E6E6FA;
text-shadow: 2px 2px 4px #ffffff;
z-index: 3;
overflow: scroll;
y-overflow: scroll;
}

#hide24 {
display: none;
top: 72%;
left: 48%;
height: 40%;
width: 100%;
background: tansparent;
color: #000000;
font: verdana;
font-size: 12pt;
font-weight: bold;
border-radius: 24%;
box-shadow: 0 0 16px rgba(255, 255, 255, 0.8);
border: 1px dotted #E6E6FA;
text-shadow: 2px 2px 4px #ffffff;
z-index: 3;
overflow: scroll;
y-overflow: scroll;
}

#cell24:hover + #hide24 {
display: block;
}

#cell25 {
display: visible;
top: 72%;
left: 8%;
height: 40%;
width: 40%;
background: tansparent;
font-size: 12pt;
font-weight: bold;
color: #000000;
font: verdana;
font-size: 12pt;
font-weight: bold;
border-radius: 24%;
box-shadow: 0 0 16px rgba(255, 255, 255, 0.8);
border: 1px dotted #E6E6FA;
text-shadow: 2px 2px 4px #ffffff;
z-index: 3;
overflow: scroll;
y-overflow: scroll;
}

#hide25 {
display: none;
top: 72%;
left: 48%;
height: 40%;
width: 100%;
background: tansparent;
color: #000000;
font: verdana;
font-size: 12pt;
font-weight: bold;
border-radius: 24%;
box-shadow: 0 0 16px rgba(255, 255, 255, 0.8);
border: 1px dotted #E6E6FA;
text-shadow: 2px 2px 4px #ffffff;
z-index: 3;
overflow: scroll;
y-overflow: scroll;
}

#cell26 {
display: visible;
top: 72%;
left: 8%;
height: 40%;
width: 40%;
background: tansparent;
font-size: 12pt;
font-weight: bold;
color: #000000;
font: verdana;
font-size: 12pt;
font-weight: bold;
border-radius: 24%;
box-shadow: 0 0 16px rgba(255, 255, 255, 0.8);
border: 1px dotted #E6E6FA;
text-shadow: 2px 2px 4px #ffffff;
z-index: 3;
overflow: scroll;
y-overflow: scroll;
}

#hide26 {
display: none;
top: 72%;
left: 48%;
height: 40%;
width: 100%;
background: tansparent;
color: #000000;
font: verdana;
font-size: 12pt;
font-weight: bold;
border-radius: 24%;
box-shadow: 0 0 16px rgba(255, 255, 255, 0.8);
border: 1px dotted #E6E6FA;
text-shadow: 2px 2px 4px #ffffff;
z-index: 3;
overflow: scroll;
y-overflow: scroll;
}

#cell27 {
display: visible;
top: 72%;
left: 8%;
height: 40%;
width: 40%;
background: tansparent;
font-size: 12pt;
font-weight: bold;
color: #000000;
font: verdana;
font-size: 12pt;
font-weight: bold;
border-radius: 24%;
box-shadow: 0 0 16px rgba(255, 255, 255, 0.8);
border: 1px dotted #E6E6FA;
text-shadow: 2px 2px 4px #ffffff;
z-index: 3;
overflow: scroll;
y-overflow: scroll;
}

#hide27 {
display: none;
top: 72%;
left: 48%;
height: 40%;
width: 100%;
background: tansparent;
color: #000000;
font: verdana;
font-size: 12pt;
font-weight: bold;
border-radius: 24%;
box-shadow: 0 0 16px rgba(255, 255, 255, 0.8);
border: 1px dotted #E6E6FA;
text-shadow: 2px 2px 4px #ffffff;
z-index: 3;
overflow: scroll;
y-overflow: scroll;
}

#cell28 {
display: visible;
top: 72%;
left: 8%;
height: 40%;
width: 40%;
background: tansparent;
font-size: 12pt;
font-weight: bold;
color: #000000;
font: verdana;
font-size: 12pt;
font-weight: bold;
border-radius: 24%;
box-shadow: 0 0 16px rgba(255, 255, 255, 0.8);
border: 1px dotted #E6E6FA;
text-shadow: 2px 2px 4px #ffffff;
z-index: 3;
overflow: scroll;
y-overflow: scroll;
}

#hide28 {
display: none;
top: 72%;
left: 48%;
height: 40%;
width: 100%;
background: tansparent;
color: #000000;
font: verdana;
font-size: 12pt;
font-weight: bold;
border-radius: 24%;
box-shadow: 0 0 16px rgba(255, 255, 255, 0.8);
border: 1px dotted #E6E6FA;
text-shadow: 2px 2px 4px #ffffff;
z-index: 3;
overflow: scroll;
y-overflow: scroll;
}

#cell29 {
display: visible;
top: 72%;
left: 8%;
height: 40%;
width: 40%;
background: tansparent;
font-size: 12pt;
font-weight: bold;
color: #000000;
font: verdana;
font-size: 12pt;
font-weight: bold;
border-radius: 24%;
box-shadow: 0 0 16px rgba(255, 255, 255, 0.8);
border: 1px dotted #E6E6FA;
text-shadow: 2px 2px 4px #ffffff;
z-index: 3;
overflow: scroll;
y-overflow: scroll;
}

#hide29 {
display: none;
top: 72%;
left: 48%;
height: 40%;
width: 100%;
background: tansparent;
color: #000000;
font: verdana;
font-size: 12pt;
font-weight: bold;
border-radius: 24%;
box-shadow: 0 0 16px rgba(255, 255, 255, 0.8);
border: 1px dotted #E6E6FA;
text-shadow: 2px 2px 4px #ffffff;
z-index: 3;
overflow: scroll;
y-overflow: scroll;
}

#cell30 {
display: visible;
top: 72%;
left: 8%;
height: 40%;
width: 40%;
background: tansparent;
font-size: 12pt;
font-weight: bold;
color: #000000;
font: verdana;
font-size: 12pt;
font-weight: bold;
border-radius: 24%;
box-shadow: 0 0 16px rgba(255, 255, 255, 0.8);
border: 1px dotted #E6E6FA;
text-shadow: 2px 2px 4px #ffffff;
z-index: 3;
overflow: scroll;
y-overflow: scroll;
}

#hide30 {
display: none;
top: 72%;
left: 48%;
height: 40%;
width: 100%;
background: tansparent;
color: #000000;
font: verdana;
font-size: 12pt;
font-weight: bold;
border-radius: 24%;
box-shadow: 0 0 16px rgba(255, 255, 255, 0.8);
border: 1px dotted #E6E6FA;
text-shadow: 2px 2px 4px #ffffff;
z-index: 3;
overflow: scroll;
y-overflow: scroll;
}



contentcontent

content
content
content

content
content
content
content
content
content


Подробнее здесь: https://stackoverflow.com/questions/793 ... other-divs