Skip to content

Instantly share code, notes, and snippets.

@Ritik4388

Ritik4388/index.html

Last active December 10, 2021 17:08
Show Gist options
  • Save Ritik4388/596d495957c8a7587a6cc1aba8662506 to your computer and use it in GitHub Desktop.
Save Ritik4388/596d495957c8a7587a6cc1aba8662506 to your computer and use it in GitHub Desktop.
Download ZIP
Sticky Positioning in CSS
Raw
index.html
<body>
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="brown"></div>
<div class="yellow"></div>
<div class="black"></div>
<div class="cyan"></div>
<div class="red1"></div>
<div class="green1"></div>
<div class="blue1"></div>
<div class="brown1"></div>
<div class="yellow1"></div>
<div class="black1"></div>
<div class="cyan1"></div>
<div class="white"></div>
<div class="white"></div>
<div class="white"></div>
<div class="white"></div>
<div class="white"></div>
<div class="white"></div>
</body>
Raw
ritik.markdown
Raw
style.css
body{
background-color: rgba(100,10,200,0.3) ;
}
.red{
background-color: red;
width:150px ;
height: 150px ;
position : sticky ;
left :450px ;
box-shadow: -10px -5px 5px
rgba(200,0,0,0.3) ;
border-radius: 20px ;
}
.blue{
background-color: blue;
width: 150px ;
height: 150px ;
position : sticky;
top:10px;
left :450px ;
box-shadow: -10px -5px 5px
rgba(0,0,100,0.3) ;
border-radius: 20px ;
}
.green{
background-color: green;
width: 150px ;
height: 150px ;
position : sticky;
top:5px;
left :450px ;
box-shadow: -10px -5px 5px
rgba(0,100,0,0.3) ;
border-radius: 20px ;
}
.brown{
background-color: brown;
width: 150px ;
height: 150px ;
position : sticky;
top:15px;
left :450px ;
box-shadow: -10px -5px 5px
rgba(100,0,0,0.3) ;
border-radius: 20px ;
}
.black{
background-color: black;
width: 150px ;
height: 150px ;
position : sticky;
top:25px;
left :450px ;
box-shadow: -10px -5px 5px
rgba(50,0,0,0.3) ;
border-radius: 20px ;
}
.yellow{
background-color: yellow ;
width: 150px ;
height: 150px ;
position : sticky;
top:20px;
left :450px ;
box-shadow: -10px -5px 5px
rgba(0,0,255,0.3) ;
border-radius: 20px ;
}
.cyan{
background-color:cyan ;
width: 150px ;
height: 150px ;
position : sticky;
top:30px;
left :450px ;
box-shadow: -10px -5px 5px
rgba(0,150,50,0.3) ;
border-radius: 20px ;
}
.red1{
background-color: red;
width:150px ;
height: 150px ;
position : sticky;
left :450px ;
top:35px ;
box-shadow: -10px -5px 5px
rgba(200,0,0,0.3) ;
border-radius: 20px ;
}
.blue1{
background-color: blue;
width: 150px ;
height: 150px ;
position : sticky;
top:45px;
left :450px ;
box-shadow: -10px -5px 5px
rgba(0,0,100,0.3) ;
border-radius: 20px ;
}
.green1{
background-color: green;
width: 150px ;
height: 150px ;
position : sticky;
top:40px;
left :450px ;
box-shadow: -10px -5px 5px
rgba(0,100,0,0.3) ;
border-radius: 20px ;
}
.brown1{
background-color: brown;
width: 150px ;
height: 150px ;
position : sticky;
top:50px;
left :450px ;
box-shadow: -10px -5px 5px
rgba(100,0,0,0.3) ;
border-radius: 20px ;
}
.black1{
background-color: black;
width: 150px ;
height: 150px ;
position : sticky;
top:60px;
left :450px ;
box-shadow: -10px -5px 5px
rgba(50,0,0,0.3) ;
border-radius: 20px ;
}
.yellow1{
background-color: yellow ;
width: 150px ;
height: 150px ;
position : sticky;
top:55px;
left :450px ;
box-shadow: -10px -5px 5px
rgba(0,0,255,0.3) ;
border-radius: 20px ;
}
.cyan1{
background-color:cyan ;
width: 150px ;
height: 150px ;
position : sticky;
top:65px;
left :450px ;
box-shadow: -10px -5px 5px
rgba(0,150,50,0.3) ;
border-radius: 20px ;
}
.white{
width:150px;
height:150px;
position:relative ;
background-color: rgba(100,10,200,0) ;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment