Platzieren eines Divs (mit Divs darin, die Mouseover-Aktionen haben) über anderen Divs auf einer Seite ⇐ HTML

[Guest]

Ich habe eine Seite mit... etwa 30 Divs darauf, und die Seite, an der ich gerade arbeite, wird ständig in der unteren linken Ecke angezeigt und stopft den gesamten Inhalt dafür willkürlich um das Div herum. Hier ist der Code, den ich bisher für Styling und HTML habe:Ich kann beim besten Willen nicht herausfinden, warum er nicht dort erscheint, wo er auf der Seite sein sollte, und warum Der darin enthaltene Inhalt wird nicht richtig geladen. Vorab tut es mir leid, dass ich den Code möglicherweise falsch gepostet habe, ich lerne immer noch SO und danke im Voraus für jede Eingabe/Einsicht.
Ich habe versucht, den Hover in CSS auszuführen, und es scheint nur so funktioniert, wenn ich es direkt in den HTML-Code einfüge (das funktioniert an einem anderen Teil meiner Website) und ich habe versucht, die oberen/linken Prozente, den Z-Index und alles, was ich hier finden konnte, um zu helfen, zu ändern.
Ich erwarte, dass das Div ausgerichtet wird Wo die Prozentsätze, die ich eingegeben habe, es und den darin enthaltenen Inhalt so platzieren würden, dass es als Liste fungiert, die beim Bewegen des Mauszeigers mehr Inhalt anzeigt und dann beim Klicken auf eine andere Seite verweist.

Code: Select all

.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[/b][b]    
content

content[/b][b]    
content
content[/b][b]    
content
content[/b][b]    
content