Mobile version
Ich habe in diesem Beitrag ein Bild bereitgestellt und wie Sie sehen können, gibt es ein Feld mit der Aufschrift „Ich bin klebrig“. Als ich also zunächst „position:sticky“ mit „top:0“ anwendete, blieb es beim Scrollen nach unten am oberen Rand des Ansichtsfensters hängen, nachdem ich jedoch „overflow:scroll“ angewendet hatte der Container, wie weit ich nach unten scrolle oder welchen Wert ich in die Eigenschaft „top“ eingebe,
Code: Select all
/*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
es klebt nicht. Warum ist das so?
