<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="yeah.css"> </head> <body> <div class="one"> <p1>one.</p1> </div> <div class="two"> <img src="/media/examples/leopard.jpg" /> <!-- Photo by Andreas Berlin on Unsplash --> <p2>Beware of the leopard</p2> </div> <div class="three"> <h1>this is one</h1> </div> <div class="four"> <h2>four.</h2> </div> <div class="five"> <h3>five.</h3> </div> </body> </html> css <style> .one { width: 15em; border: 1px solid #333; box-shadow: 8px 8px 5px #555; padding: 8px 12px; background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc); color: red; } .two { position: relative; top: 65px; left: 65px; width: 15em; border: 1px solid #333; box-shadow: 8px 8px 5px #444; padding: 8px 12px; background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc); } .three{ position: fixed; top: 200px; left: 300px; display: inline-block; width: 100x; height: 100px; background: LightBlue; color: white; } .four{ position: absolute; top: 300px; left: 400px; display: inline-block; width: 100px; height:100px; background: red; color: white; } .five{ position: sticky; top: 600px;left: 400px; display: inline-block; width: 100px; height: 100px; background: yellow; color: white; } </style>
原文：https://www.cnblogs.com/ggmh/p/9692905.html