固定定位

最新推荐文章于 2021-05-02 10:24:58 发布

czw10000

最新推荐文章于 2021-05-02 10:24:58 发布

阅读量185

点赞数

分类专栏： javaEE HTML 文章标签： java

本文链接：https://blog.csdn.net/weixin_48722971/article/details/111705390

版权

javaEE 同时被 2 个专栏收录

88 篇文章 2 订阅

订阅专栏

HTML

21 篇文章 0 订阅

订阅专栏

固定定位

固定定位也会脱离标准流，设置position为fixed，依然需要借助于四个方向属性top、left、right、bottom进行空间移动

不区分行级元素和块级元素，和绝对定位一样，唯一的不同它不会随着滚动条的滚动而发生移动。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>固定定位操作</title>
<style type="text/css">
	*{
		box-sizing: border-box;
		padding: 0;
		margin: 0;
	}
	
	div {
		height: 300px;
		border: 1px solid red;
    }
    #div01{
    	background-color: black;
    }
    
	#div02{
		height: 500px;
		background-color: purple;
	}
	
	#div03{
		background-color: yellow;
		position: fixed;
		top:200px;
		width: 100%;
	}
	
</style>
</head>
<body>
	<div id ="div03">我是固定定位</div>
	<div id="div01">我是相对定位</div>
	<div id="div02">我是绝对定位</div>
	
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

czw10000

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
固定定位

固定定位固定定位也会脱离标准流，设置position为fixed，依然需要借助于四个方向属性top、left、right、bottom进行空间移动不区分行级元素和块级元素，和绝对定位一样，唯一的不同它不会随着滚动条的滚动而发生移动。<!DOCTYPE html><html><head><meta charset="UTF-8"><title>固定定位操作</title><style type="text/css
复制链接

扫一扫