Позиция: Прикреплено, не имеет эффекта. ⇐ CSS

[Anonymous]

Пытаюсь понять, почему мой элемент заголовка не прикрепляется. Родителем является элемент тела, насколько я могу судить, переполнение не установлено. Тело имеет высоту; мой элемент заголовка не растянут и должен иметь место для прокрутки. У меня такое ощущение, что это потому, что у меня есть абсолютно позиционированные элементы внутри заголовка, но я не нашел документации, в которой говорилось бы, что это может быть проблемой.

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

:root {
--black: #181C14;
--grey: #3C3D37;
--green: #697565;
--tan: #ECDFCC;
--red: #a2080c;
--animation-timing: 300ms ease-in-out;
}

@font-face {
font-family: 'Againts';
src: url('assets/fonts/subset-Againts.woff2') format('woff2'),
url('assets/fonts/subset-Againts.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: block;
}

*,
*:before,
*:after {
box-sizing: border-box;
}

* {
margin: 0;
padding: 0;
}

button,
input,
select,
textarea {
font-family: inherit;
}

img {
width: 100%;
}

body {
background: black;
font-family: 'Bebas Neue', sans-serif;
font-size: 1.3rem;
text-decoration: none;
color: var(--tan);
height: max-content;
}

h2 {
font-weight: 100;
font-size: 1.5rem;
}

a {
text-decoration: none;
color: var(--tan);
}

header {
position: sticky;
top: 0;
}

nav {
font-weight: 400;
font-size: clamp(1.5rem, 3vw, 2rem);
padding: .5rem;
height: 3.25rem;
display: flex;
justify-content: space-between;
align-items: center;
}

.nav-list {
position: absolute;
right: 0;
list-style: none;
display: flex;
align-items: center;
}

.nav-list-item {
margin-right: .5rem;
}

.nav-list-item input {
appearance: none;
}

.nav-list-item:checked {
background-color: red;
}

.logo {
margin: auto;
}

.logo img {
height: clamp(2rem, 3vw, 2.5rem);
}

.bar {
display: block;
position: relative;
}

.bar::before,
.bar::after,
.bar {
width: 40px;
height: 5px;
background-color: var(--tan);
transition: transform var(--animation-timing);
}

.bar::before,
.bar::after {
content: "";
position: absolute;
left: 0;
}

.bar::before {
bottom: 12px;
}

.bar::after {
top: 12px;
}

.hamburger {
position: absolute;
outline: none;
appearance: none;
border: none;
background: none;
margin-left: .5rem;
cursor: pointer;
}

.menu-open {
transform: rotate(45deg);
}

.menu-open::before {
opacity: 0;
}

.menu-open::after {
transform: rotate(90deg) translate(-12px);
}

.menu-title {
display: none;
position: absolute;
}

.sidebar {
translate: -120%;
transition: translate var(--animation-timing);
position: absolute;
top: 50px;
background-color: var(--black);
width: 15rem;
height: 60vh;
padding: 1.5rem;
box-shadow: 0 8px 15px 0 rgba(0, 0, 0, .5);
z-index: 3;
}

.sidebar--visible {
translate: 0;
}

.sidebar__list {
font-family: 'Nunito', sans-serif;
font-weight: 300;
font-size: 1.5rem;
list-style: none;
}

.sidebar-item {
margin-bottom: 2rem;
cursor: pointer;
}

.search-bar {
opacity: 0;
transform: translateY(-150px);
position: absolute;
top: 50px;
font-family: 'Nunito', sans-serif;
background-color: var(--black);
box-shadow: 0 8px 15px 0 rgba(0, 0, 0, .5);
text-align: center;
padding: 8px;
height: 4rem;
width: 100%;
z-index: 3;
transition: opacity var(--animation-timing), transform var(--animation-timing);
}

.search-open {
opacity: 1;
transform: translateY(0);
}

#search {
background-color: var(--tan);
border-radius: 16px;
font-size: 1rem;
padding: .4rem .8rem;
width: 80%;
max-width: 700px;
}

.hero__carousel {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 650px;
background: var(--black);
}

.hero__carousel__button--left,
.hero__carousel__button--right {
position: absolute;
z-index: 2;
top: 56px;
background: none;
border: none;
color: var(--tan);
font-size: 4rem;
top:  352px;
cursor: pointer;
}

.hero__carousel__button--left:hover,
.hero__carousel__button--right:hover,
.hero__carousel__button--left:focus,
.hero__carousel__button--right:focus {
color: white;
}

.hero__carousel__button--left {
left: 0px;
}

.hero__carousel__button--right {
right: 0px;
}

.hero__carousel__slider {
display: flex;
position: absolute;
top: 52px;
left: 0%;
width: 400%;
height: 600px;
background: var(--black);
transition: left 500ms ease-in-out;
}

.hero__carousel__slide {
width: 100vw;
}

.hero__carousel__slide span {
background: none;
position: absolute;
font-family: 'Againts', sans-serif;
margin-left: min(10vw, 200px);
}

#mThai {
font-size: clamp(4.5rem, 10vw, 10rem);
color: #a2080c;
top: 1.5rem;
}

#mma {
font-size: clamp(4rem, 10vw, 10rem);
color: var(--green);
top: 10px;
/* margin-left: max(30px, 7vw);  */
}

#bjj {
font-size: clamp(3rem, 10vw, 5rem);
color: var(--tan);
top: 20px;
}

.hero__carousel__slide img {
height: 650px;
object-fit: cover;
}

.hero__carousel__slide.gary img {
object-position: 20% 100%;
}

.hero__carousel__cta {
position: absolute;
display: flex;
justify-content: center;
left: 0;
width: 100%;
}

.cta {
font-size: 2rem;
position: absolute;
top: 165px;
background: none;
color: var(--tan);
border: 3px solid var(--tan);
padding: 10px;
border-radius: .5rem;
z-index: 2;
display: none;
cursor: pointer;
}

.cta.current-slide {
display: block;
}

.cta:hover,
.cta:focus {
background: rgba(0, 0, 0, .2);
color: white;
border: 3px solid white;
}

.hero__carousel__indicators {
position: absolute;
display: flex;
top: 650px;
left: calc(50% - 2.8rem);
z-index: 2;
}

.hero__carousel__indicator {
border: 2px solid var(--tan);
width: 1rem;
height: 1rem;
border-radius: 50%;
margin: .25rem;
background: rgba(24, 28, 20, .5);
cursor: pointer;
}

.hero__carousel__indicator:focus,
.hero__carousel__indicator:hover {
border: 2px solid white;
}

.hero__carousel__indicator.current-slide {
background: rgba(236, 223, 204, .95);
}

.hero__footer {
font-size: 1.5rem;
text-align: center;
padding: 10px;
}

.hero__footer a {
cursor: pointer;
}

.hero__footer a:hover {
color: white;
}

.attribution {
display: none;
}

.is-hidden {
display: none;
}

main {
font-family: 'Nunito', sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
border-top: 1px solid var(--green);
}

.collection {
padding: 1rem;
display: grid;
grid-template-columns: repeat(auto-fit, 328px);
justify-content: space-evenly;
gap: 2rem;
}

.collection-title {
font-size: 2.5rem;
font-weight: 200;
padding: 10px;
}

.collection__img {
display: block;
height: 350px;
background-image: radial-gradient(var(--tan), #6d6d6a);
}

.collection__img img {
height: 100%;
}

.item-text {
margin-top: 1rem;
}

@media (min-width: 768px) {
.hamburger {
display: none;
}

.menu-title {
display:  inline;
}
}

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

[*]




Temper Fightwear








[url=#]MMA[/url]
[*][url=#]MUAY THAI[/url]
[*][url=#]JIU-JITSU[/url]
[*][url=#]ABOUT[/url]
[*][url=#]SIGN IN[/url]
[/list]

[url=#]COLLECTIONS[/url]
[url=#][i][/url]
[list]
[*]
[url=#]
[/i]
[/url]

[*]
[url=#]
[i][/i]
[/url]

[/list]



[i]





[/i]



[i]                    alt="fighter in headgear and boxing gloves with his back turned in front of a black and gold background of japanese dragons">

Muay Thai
[img]./images/Hero/HeroMT.png[/img]
                    alt="Muay Thai fighter blurring from right to left while throwing a knee strike">

MMA
[img]./images/Hero/HeroMMA.png[/img]
                    alt="MMA fighter in a ring mounted on top of opponent with arm raised ready to strike">

Jiu-Jitsu
[img]./images/Hero/HeroBJJ.png[/img]



[/i]


SHOP TOP PICKS
SHOP NOW
SHOP NOW
SHOP NOW









REGISTER NOW  AND SAVE 10% ON YOUR FIRST ORDER!!


FEATURED PRODUCTS



[img]./images/MT/Shirts/FLATblk.png[/img]


Thai Fighter Tee
$24.99




[img]./images/MT/Shorts/ThaiShortsGreen.png[/img]


Muay Thai Fight Shorts
$29.99




[img]./images/MMA/Shirts/HitLikeAGirl.png[/img]


Hit Like A Girl Tee
$24.99




[img]./images/MMA/Shorts/MMAshortsBlkGld.png[/img]


MMA Fight Shorts
$29.99

Пытался запустить JavaScript, чтобы проверить, есть ли свойство переполнения у родительского элемента, но такого свойства не обнаружено.

Подробнее здесь: https://stackoverflow.com/questions/796 ... -no-effect