Я предоставил изображение в этом посте, и, как вы можете видеть, есть поле, в котором написано «Я липкий». Итак, изначально, когда я применил «position:sticky» с «top:0», он застрял в верхней части области просмотра при прокрутке вниз, но после применения «overflow:scroll» в контейнер, насколько я прокручиваю вниз или какое значение я помещаю в свойство "top",
Код: Выделить всё
/*This code doesn't provide a responsive design*/
CSS Position Property
.container {
border: 2px solid red;
height: 200vh;
overflow: scroll;
}
.box {
background-color: aqua;
height: 150px;
width: 150px;
margin: 30px;
border: 2px solid black;
}
.container {
display: flex;
}
#box1 {
position: static;
font-weight: 500;
font-size: 25px;
text-align: center;
}
#box2 {
position: relative;
top: 210px;
font-weight: 500;
text-align: center;
font-size: 25px;
}
#box3 {
position: fixed;
bottom: 20px;
height: auto;
width: 500px;
border: 2px solid black;
border-radius: 25px;
background-color: grey;
box-shadow: inset 0px 0px 5px black;
font-size: 25px;
text-align: center;
z-index: 1;
}
#box4 {
height: auto;
width: 280px;
padding: 40px;
border-radius: 90px;
position: absolute;
top: 180px;
left: 430px;
text-align: center;
}
#box5 {
position: sticky;
top: 0;
font-weight: 500;
text-align: center;
font-size: 25px;
}
I am static
I am relative
I am fixed here
I am absolute
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequatur,
ad laboriosam! Natus rerum, modi laboriosam maiores architecto
repudiandae esse ipsam nam expedita eveniet. Rem minima minus cumque
porro, consectetur dicta?Lorem ipsum dolor sit amet consectetur
adipisicing elit. Fuga officia repellat recusandae aperiam quod facere
est tenetur corrupti impedit repudiandae at, placeat, quas
dignissimos, perferendis assumenda laudantium commodi nostrum? Ex?
I am sticky
не прилипает. Почему?
Подробнее здесь: https://stackoverflow.com/questions/796 ... d-adding-a
