CSS中元素位置的定位处理——固定定位:
概念解释:
本案例通过一个淘宝页面演示固定定位:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>商品详情页</title> <style type="text/css"> div { width:30px; background-color: #ccc; text-align: center; line-height:30px; position: fixed; bottom: 10px; right:5px; } </style> </head> <body> <div><a href="#">TOP</a></div> <h1>iPhone8plus</h1> <p>这是一款4G手机</p> <p>配置和8差不多</p> <p>这手机防火</p> <p>也可以防盗</p> <p>还可以防止闺蜜</p> <p>......</p> <p>......</p> <p>......</p> <p>......</p> <p>......</p> <p>......</p> <p>......</p> <p>......</p> <p>......</p> <p>......</p> <p>......</p> <p>......</p> <p>......</p> <p>......</p> <p>......</p> <p>......</p> <p>......</p> <p>......</p> <p>......</p> <p>......</p> <p>......</p> <p>......</p> <p>......</p> <p>......</p> <p>......</p> <p>......</p> <p>......</p> <p>......</p> <p>......</p> <p>......</p> <p>......</p> <p>......</p> </body> </html>页面最终显示效果:滚动滚动条 TOP始终固定在浏览器左下角