Chạy thử Css position sticky

Chạy thử Css position sticky

Chạy thử Css position sticky

Tự code rồi chạy thử... Chạy Thử 
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Css position sticky</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
span {width:100%;float:left; height:auto;margin-bottom:10px}
#header{width:100%;float:left;height:100px;background:red;margin-bottom:10px}
#kchinh{width:100%;height:auto;margin-bottom:20px}
#kchinhtr{width:70%;height:2000px;background:green}
#kchinhph{width:29%;float:right;min-height:200px;background:red}
#kfooter{width:100%;float:left;height:auto;min-height:500px;background:red}
</style>
</head>
<body>
<span>Css position sticky thường dùng khi có 2 mục trái phải song song nhau, khi cuộn chuột đọc nội dung thì mục sticky bên cạnh sẽ đứng lại giống fixed, và sau khi đọc xong thì sticky sẽ không đứng nữa và cuộn theo mục bài viết, 2 mục phải nằm trong một thẻ html khác và thẻ HTML đó thường có float:left và width:100%:</span>
<header id="header">
<h1>Chạy thử Css position sticky</h1>
</header>
<section id="kchinh" style="float:left;">
<div id="kchinhtr" style="float:left;">
  float:left;
</div>
<div id="kchinhph" style="position: sticky; top: 20px;">
position: sticky; top: 20px;
</div>
</section>
<footer id="kfooter">footer&lt;/footer>
</body>
</html>
Chạy thử Css position sticky nằm trong bài viết Thuộc tính position trong CSS