009 （定位属性）

最新推荐文章于 2024-09-25 15:27:18 发布

啊啊啊啊ly

最新推荐文章于 2024-09-25 15:27:18 发布

阅读量111

点赞数

分类专栏：每天一个小知识文章标签： markdown css css3

本文链接：https://blog.csdn.net/m0_46555090/article/details/121609177

版权

每天一个小知识专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Day009 （定位属性）

一.position定位属性和属性值

position 定位属性，检索对象的定位方式；

语法：position：static /absolute/relative/fixed

$\color{red}{取值：}$

1、static：默认值，无特殊定位，对象遵循HTML原则；

2、absolute：绝对定位，将对象从文档流中拖离出来，使用top/right/bottom/left等属性相对其最接近的一个并有定位设置的父元素进行绝对定位；**如果不存在这样的父对象，则依据根元素(html)浏览器页面进行定位，**而其层叠通过z-index属性定义

ps：绝对定位(absolute)
1.absolute相对于其最近有定位的父元素进行定位，如果没有这样的父元素，相对于根元素（html）
2.absolute脱离文本流离层且不占为

在这里插入图片描述

这是浮动：文本会被挤出来,因为浮动是脱离半层

在这里插入图片描述

这是绝对定位：文本不会挤出来，因为他是脱离一层

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>绝对定位</title>
	<style type=text/css>
		*{
			margin:0;
			padding:0;
		}
		.bigBox{
			width:800px;
			height:800px;
			background:yellow;
			margin: auto;
			overflow:hidden;
			position:relative;

		}
		.box{
			width:500px;
			height:500px;
			background:skyblue;
			margin:50px auto;
		}
		.box .div1{
			width:100px;
			height:100px;
			background:red;
			position:absolute;
/*			top:0;
			left:0;
*/						
*/*上两行为坐标属性*/
			z-index:1;
			/*绝对定位(absolute)
			1.absolute相对于其最近有定位的父元素进行定位，如果没有这样的父元素，相对于根元素（html）
			2.absolute脱离文本流离层且不占为*/
		}
		.box .div2{
			width:150px;
			height:150px;
			background:blue;
			position:absolute;
		}
		.box .div3{
			width:200px;
			height:200px;
			background:green;
			position:absolute;
		}

	</style>
</head>
<body>
	<div class="bigBox">
		<div class=box>
			<div class="div1">1</div>
			<div class="div2">2</div>
			<div class="div3">3</div>	
		</div>
	</div>
</body>
</html>

3、relative ：相对定位，该对象的文档流位置不动，将依据right，top，left，bottom（相对定位）等属性在正常文档流中偏移位置；其层叠通过z-index属性定义

ps：相对定位（relative）
1.相对定位相对于自身的位置偏移
2.相对定位不脱离文档流，但是脱离层
3.原有的位置保留（占位）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>相对定位</title>
	<style type=text/css>
		*{
			margin:0;
			padding:0;
		}
		.box{
			width:500px;
			height:500px;
			background:blue;
			margin:20px auto;
		}
		.box .div1{
			width:100px;
			height:100px;
			background:red;
			position:relative;
			top:100px;
			left:100px;
		}
		.box .div2{
			width:150px;
			height:150px;
			background:yellow;
			position:relative;
		}
		.box .div3{
			width:200px;
			height:200px;
			background:skyblue;
		}
		/*相对定位（relative）
		1.相对定位相对于自身的位置偏移
		2.相对定位不脱离文档流，但是脱离层
		3.原有的位置保留（占位）*/
	</style>
</head>
<body>
	<div class="box">
		<div class="div1">div1</div>
		<div class="div2">div2</div>
		<div class="div3">div3</div>
	</div>
</body>
</html>