定位009

最新推荐文章于 2024-07-21 15:26:22 发布

陀陀吖

最新推荐文章于 2024-07-21 15:26:22 发布

阅读量73

点赞数

分类专栏： html与css

本文链接：https://blog.csdn.net/weixin_40422393/article/details/88909450

版权

html与css 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>定位</title>
</head>
<style>
	/*定位position  子绝父相
	1、静态定位：static,m默认定位，作用是取消定位
	2、相对定位：relative 脱标，占有位置
	3、绝对定位：absolute  脱标，不占位置 没有父级定位会以窗口定位为主
	4、固定定位 fixed   只和body浏览器窗口位置，与父级没有关系，只认浏览器窗口为父级 一定要给宽度  是特殊的绝对定位*/

	/*加了position和overflow:left的盒子，margin失效*/

	/*postion:absolute;
	left:50%;     定位盒子居中问题*/
	div{
		width: 200px;
		height: 200px;
		background-color: pink;
		position: fixed;
		left: 0px;
		top: 100px;
	}
</style>
<body>
<!-- 固定定位 -->
	<div>ad</div>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
	<p>wo</p>
</body>
</html>