KokoaTalk Clone Coding: fixed
position: static(default)
<head>
<style>
body {
height: 1000vh; I make browser bigger. The page is very long.
margin: 20px;
}
div {
position: fixed;
width: 300px;
height: 300px;
background-color: royalblue;
}
</style>
</head>
<body>
<div></div>
</body>
<head>
<style>
body {
height: 1000vh;
margin: 20px;
}
div {
width: 300px;
height: 300px;
}
#blue {
background-color: royalblue;
}
#pink {
position: fixed;
width: 350px;
background-color: thistle;
}
</style>
</head>
<body>
<div id="blue"></div>
<div id="pink"></div>
</body>
The pink div stay initial position where it was.
But you can change if you want.
#pink {
position: fixed;
top: 200px;
left: 200px;
width: 350px;
background-color: thistle;
}
Two divs are completely different layer.
'top: 200px' is break layer. Now that the pink is on top of everything.