Div прокрутка со страницей ⇐ Javascript

[Гость]

Я работаю над инструментом спринта в HTML/CSS. Это сеанс написания времени, где пользователь выбирает продолжительность, ударяет «запуск» и пишет до тех пор, пока таймер не закончится. Проблема, однако, заключается в позиционировании, а не с инструментом. /> Справа: #Sprint-Card
Большая карта спринта, отображающая фоновое изображение (выбранное из
the setting panel.), И большой таймер обратного отсчета в центре. Я ожидал, что он останется на месте, как и все остальное. /> Другие фиксированные элементы, такие как на панели .sprint-settings, нет этой проблемы,
только карта делает < /li>
< /ol>
Любые идеи о том, почему это происходит или что еще я должен проверить? < /p>
Class = "Snippet-Code">

Код: Выделить всё

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: white;
color: #333;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}

main {
flex: 1;
padding: 3rem 1rem;
max-width: 700px;
margin: 0 auto;
text-align: center;
}

.sprint-page {
padding: 1rem 2rem;
text-align: left;
width: 20%;
margin: 0;
position: relative;
top: 0;
z-index: 5;
background-color: #e2e1e1;
box-shadow: rgba(85, 84, 85, 0.041) 3px 0px 0px;
}

.sprint-layout {
display: flex;
justify-content: space-between;
width: 100%;
padding: 0 2rem;
box-sizing: border-box;
background-color: rgb(21, 255, 0);
}

.sprint-settings {
position: fixed;
left: 2rem;
top: 250px;
width: 250px;
display: flex;
flex-direction: column;
gap: 1rem;
z-index: 10;
}

.sprint-card {
position: fixed;
right: 3rem;
top: 150px;
width: 1300px;
height: 600px;
background-image: url("../Images/sprints/dragonknight.jpg");
background-size: cover;
background-position: center;
color: white;
padding: 2rem;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
z-index: 0;
}

.sprint-info {
background-color: rgba(0, 0, 0, 0.6);
padding: 2rem;
border-radius: 10px;
text-align: center;
width: 50%;
}

.sprint-info h2 {
margin: 0;
font-size: 2.5rem;
}

#sprint-timer {
font-size: 4rem;
margin-top: 1rem;
font-weight: bold;
}

.sprint-settings label {
font-weight: bold;
color: #333;
}

.sprint-settings select,
.sprint-settings button {
padding: 0.5rem;
font-size: 1rem;
border-radius: 5px;
border: 1px solid #ccc;
width: 100%;
box-sizing: border-box;
}

.sprint-settings button.btn {
margin-top: 1rem;
cursor: pointer;
background-color: #77946e;
color: white;
border: none;
}

.sprint-settings button.btn:hover {
background-color: #45a049;
}

.attribution {
display: block;
font-style: italic;
color: #555;
background-color: #ffffff5d;
padding: 10px 20px;
margin: 600px 0;
font-size: 0.9em;
}

.motivation-text {
text-align: center;
margin-top: auto;
font-size: 1.1rem;
font-weight: bold;
color: #ffffff;
opacity: 0;
transition: opacity 1s ease-in-out;
}

@keyframes glow {
0%, 100% { text-shadow: 0 0 10px #ffd700; }
50% { text-shadow: 0 0 20px #ff4500;  }
}

.sprint-complete {
font-size: 2rem;
color: #ffd700;
animation: glow 1.5s infinite;
text-align: center;
margin-top: 1rem;
}

@media (max-width: 768px) {
.sprint-page {
width: 30%;
padding: 0.5rem;
}

.sprint-page h1 {
font-size: 20px;
}

.sprint-page p {
font-size: 14px;
}

.sprint-layout {
display: flex;
flex-direction: row;
overflow-x: auto;
padding: 0 1rem;
}

.sprint-settings {
position: fixed;
top: 240px;
left: 0.1rem;
width: 200px;
gap: 0.8rem;
padding: 0.5rem;
font-size: 0.9rem;
z-index: 10;
}

.sprint-card {
position: fixed;
top: 200px;
right: 0.4rem;
width: 480px;
height: 300px;
padding: 1rem;
border-radius: 8px;
background-size: cover;
background-position: center;
color: white;
}

.sprint-info {
width: 100%;
padding: 1rem;
font-size: 0.9rem;
}

.sprint-info h2 {
font-size: 1.5rem;
}

#sprint-timer {
font-size: 2rem;
}

.motivation-text {
font-size: 0.9rem;
}
}

.tooltip {
display: inline-block;
margin-left: 5px;
color: #414141;
background-color: #c7baba;
border-radius: 50%;
width: 18px;
height: 18px;
text-align: center;
font-size: 12px;
line-height: 18px;
font-weight: bold;
cursor: pointer;
position: relative;
z-index: 1000;
}

.tooltip:hover::after {
content: attr(data-tooltip);
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 125%;
background-color: #333;
color: #fff;
padding: 6px 10px;
border-radius: 5px;
white-space: normal;
width: 200px;
font-size: 0.85rem;
z-index: 1000;
opacity: 1;
transition: opacity 0.3s;
}

.tooltip:hover::before {
content: "";
position: absolute;
bottom: 110%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: #333;
z-index: 1001;
}< /code>

Writing Sprint
Customize your sprint session below and press start when ready. You can adjust some settings during the sprint!
All background images were pulled from Freepik.  They belong to the rightful owner.




Sprint Duration
?


10 Minutes
20 Minutes
30 Minutes
45 Minutes
60 Minutes



Background Image
?


Knight and Dragons
Knight and Castle
Castle on Cliff
Ancient Ruins
Sunken City
Final Battle



Ambience
?


None
Forest
Night
Wind Howling
Fireplace
Birds



Volume
?



Start Sprint
Reset Sprint




Ready to Sprint!
00:00
You’ve got this!







[h4]About[/h4]
[url=about.html]About Us[/url]
[url=contact.html]Contact Us[/url]
[url=contact.html]Partnerships[/url]
[url=faq.html]Frequently Asked Questions[/url]

[h4]Resources[/h4]
[url=writingsprint.html]Writing Sprint[/url]
[url=namegenerator.html]Name Generator[/url]

[h4]Community[/h4]
[url=https://discord.com/invite/7nu2Zz8StN]
[img]Images/Discord_Logo.png[/img]
 Discord
[/url]
[url=https://www.reddit.com/r/fantasywriters/]
[img]Images/Reddit_Logo.png[/img]
 Reddit
[/url]



© 2025 FantasyWriters.  All rights reserved.

Подробнее здесь: https://stackoverflow.com/questions/796 ... h-the-page