HTML -Element kleben Sie auch nach dem Auftragen von "Position: klebrig" und Hinzufügen eines "oberen" Werts ⇐ HTML

[Anonymous]

Ich habe ein Bild gegeben, das ein Bild in diesem Beitrag geliefert habe, und wie Sie sehen können, dass ein Kasten geschrieben wurde. i scrolled down but after applying "overflow:scroll" to the container ,how much i scroll down or whatever value i put in the "top" property ,

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?