potion的应用和如何实现

最新推荐文章于 2024-07-18 15:09:36 发布

zzh_3303097051

最新推荐文章于 2024-07-18 15:09:36 发布

阅读量149

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/zzh_3303097051/article/details/110704852

版权

一、position的应用

很多界面下都有这个按钮，滑动页面会发现他不会移动，实线这个效果会用到position

二、如何实现

创建一个web项目，写入如下代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		.out{
			border: 2px solid blanchedalmond;
			background-color: cyan;
			height: 60px;
			widows: 60px;
			}
		#in{
			width: 20px;
			height:20px;
			}
			
	</style>
	<body>
		<div class="out">
			<div id="in" style="background-color: red";></div>
		    <div id="in" style="background-color: yellow";></div>
		    <div id="in" style="background-color: black";></div>
		</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
	</body>
</html>

这么多<div id="">1</div>的作用是怎加页面的长度，使页面可以上下滑动，对比明显

运行后

如果想要黄色块实现这种效果，就写入 position: fixed，如

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		.out{
			border: 2px solid blanchedalmond;
			background-color: cyan;
			height: 60px;
			widows: 60px;
			}
		#in{
			width: 20px;
			height:20px;
			}
	</style>
	<body>
		<div class="out">
			<div id="in" style="background-color: red";></div>
		    <div id="in" style="background-color: yellow;position: fixed";><!--生成绝对定位的元素，相对于浏览器窗口进行定位--></div>
		    <div id="in" style="background-color: black";></div>
		</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
	</body>
</html>

运行后

发现黑色块不见了，这是因为黄色块，脱离了文档流，黑色块往上移了，被黄色块挡住了。往下滑发现黄色块相对网页静止,黑块出现

可以设定黄快的位置，如

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		.out{
			border: 2px solid blanchedalmond;
			background-color: cyan;
			height: 60px;
			widows: 60px;
			}
		#in{
			width: 20px;
			height:20px;
			}
	</style>
	<body>
		<div class="out">
			<div id="in" style="background-color: red";></div>
		    <div id="in" style="background-color: yellow;position: fixed;right: 2px;bottom: 5px";><!--生成绝对定位的元素，相对于浏览器窗口进行定位--></div>
		    							<!--距右边两像素，距底边五像素-->
		    <div id="in" style="background-color: black";></div>
		</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
		<div id="">1</div>
	</body>
</html>

运行后