CSS设置元素浮动固定位置

最新推荐文章于 2023-04-03 22:59:32 发布

wh_week8

最新推荐文章于 2023-04-03 22:59:32 发布

阅读量1.7k

点赞数

分类专栏： CSS 文章标签： css固定div css滑动固定 css悬浮效果

原文链接：https://blog.youkuaiyun.com/ssxueyi/article/details/80831644

版权

本文介绍了如何使用CSS让元素实现浮动和固定在页面特定位置的效果，通过示例代码详细展示了CSS设置div固定和悬浮的方法，适用于网页布局和交互设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>DIV悬浮示例-纯CSS实现</title>

		<style type="text/css">
			img {
				width: 120px;
			}
			/*设置了高度，可以上下滚动*/
			
			body {
				height: 1800px;
			}
			/*div通用样式*/
			div {
				background: #1ab7a72b;
				color: #ffffff;
				overflow: hidden;
				z-index: 9999;
				position: fixed;
				padding: 5px;
				text-align: center;
				width: 120px;
				height: 120px;
				border-bottom-left-radius: 4px;
				border-bottom-right-radius: 4px;
				border-top-left-radius: 4px;
				border-top-right-radius: 4px;
			}
			/*右上角*/
			
			div.right_top {
				right: 10px;
				to