前端入门学习笔记五十八

最新推荐文章于 2024-08-13 11:12:51 发布

物恰冰可乐

最新推荐文章于 2024-08-13 11:12:51 发布

阅读量611

点赞数

分类专栏：前端文章标签：前端学习 html

本文链接：https://blog.csdn.net/m0_65384293/article/details/128227561

版权

前端专栏收录该内容

109 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8"> 
	<title>CSS fixed</title> 
		<style type  = "text/css">
		p.pos_fixed
		{
			position:fixed;
			top:100px;
			right:10px;
		}
		</style>
	</head>
	<body>
	<p class="pos_fixed">盗墓笔记</p>
	<p><b>盗墓笔记</b>沙海</p>
	<p>盗墓笔记之终极笔记</p>
	<p>盗墓笔记之重启之极海听雷一季</p>
	<p>盗墓笔记之重启之极海听雷二季</p>
	<p>盗墓笔记之老九门</p>
	<p>盗墓笔记之藏海花</p>
	</body>
</html>

CSS fixed
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8"> 
	<title>CSS relative</title> 
		<style type  = "text/css">
		h3.pos_left
		{
			position:relative;
			left:-90px;
		}
		h3.pos_right
		{
			position:relative;
			left:90px;
		}
		</style>
	</head>
	<body>
		<h3>赠汪伦 早发白帝城</h3>
		<h3 class="pos_left">朝辞白帝彩云间</h3>
		<h3 class="pos_right">千里江陵一日还</h3>
		<p>两岸猿声啼不尽</p>
		<p>李白乘舟将欲行</p>
		<p>忽闻岸上踏歌声</p>
	</body>
</html>

CSS relative
相对定位元素的定位是相对其正常位置

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8"> 
	<title>CSS relative</title> 
		<style type  = "text/css">
		h3.pos_top
		{
			position:relative;
			top:-100px;
		}
		</style>
	</head>
	<body>
		<h3>床前明月光</h3>
		<h3 class="pos_top">床前明月光</h3>
		<p><b>举头望明月</b> 低头思故乡</p>
	</body>
</html>

CSS relative
移动相对定位元素，但它原本所占的空间不会改变
相对定位元素经常被用来作为绝对定位元素的容器块

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8"> 
	<title>CSS absolute</title> 
		<style type  = "text/css">
		h3
		{
			position:absolute;
			left:300px;
			top:200px;
		}
		</style>
	</head>
	<body>
		<h3>天门中断楚江开，碧水东流至此回。</h3>
		<p>两岸青山相对出，孤帆一片日边来。</p>
	</body>
</html>