笔记-html 定位

最新推荐文章于 2021-09-28 12:17:14 发布

sinat_34301608

最新推荐文章于 2021-09-28 12:17:14 发布

阅读量222

点赞数

分类专栏：随手记文章标签：文档

本文链接：https://blog.csdn.net/sinat_34301608/article/details/53112485

版权

随手记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

position:absolute:相对，position:relative;绝对定位，position:static静态默认定位，position:fixed固定定位。

默认定位就是原来的位置不发生改变，fixed固定定位参照物是整个文档也就是说整个网页，

相对定位和绝对定位是一对，必须一块使用才能有效果，用相对定位的那一个块，参照物是绝对定位的那一块，

用top。left，right,bottom定位他的上左右下位置。

<!DOCTYPE html>
<html>
<head>
	<title>定位</title>
	<meta charset="utf-8">
	<style type="text/css">
	#d1{
		width: 200px;
		height: 400px;
		background-color: blue;
		position:relative;
       


	}	
	#d2{
		width: 300px;
		height: 400px;
		background-color: pink;
		position:absolute;
		top: 10px;
		r
	}
	</style>
	
</head>
<body>
<div id="d1">
123
</div>
<div id="d2">456</div>

</body>
</html>

要注意的是在没有父元素镶套的情况下他的相对定位参照对象是body，他的上一级。

镶套后他的参照物就是d1了，没有body默认外边距的8px;

sinat_34301608

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
笔记-html 定位

position:absolute:相对，position:relative;绝对定位，position:static静态默认定位，position:fixed固定定位。默认定位就是原来的位置不发生改变，fixed固定定位参照物是整个文档也就是说整个网页，相对定位和绝对定位是一对，必须一块使用才能有效果，用相对定位的那一个块，参照物是绝对定位的那一块，用top。left，right
复制链接

扫一扫