HTML基础笔记_7 相对定位绝对定位固定定位

最新推荐文章于 2024-07-14 10:25:44 发布

火山猿

最新推荐文章于 2024-07-14 10:25:44 发布

阅读量232

点赞数

分类专栏： WEB 文章标签： css html

本文链接：https://blog.csdn.net/Quc2019/article/details/104325381

版权

什么是定位

/*
               * 定位：
               *    - 定位指的就是将指定的元素摆放到页面的任意位置
               *        通过定位可以任意的摆放元素
               *    - 通过position属性来设置元素的定位
               *        -可选值：
               *            static：默认值，元素没有开启定位
               *            relative：开启元素的相对定位
               *            absolute：开启元素的绝对定位
               *            fixed：开启元素的固定定位（也是绝对定位的一种）

相对定位

当元素的position属性设置为relative时，则开启了元素的相对定位
               *    1.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化
               * 2.相对定位是相对于元素在文档流中原来的位置进行定位
               *    3.相对定位的元素不会脱离文档流
               *    4.相对定位会使元素提升一个层级
               *    5.相对定位不会改变元素的性质，块还是块，内联还是内联

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
		<style type="text/css">
			
			.box1{
				width: 200px;
				height: 200px;
				background-color: red;
			}
			
			.box2{
				width: 200px;
				height: 200px;
				background-color: yellow;
				/*
				 * 定位：
				 * 	- 定位指的就是将指定的元素摆放到页面的任意位置
				 * 		通过定位可以任意的摆放元素
				 * 	- 通过position属性来设置元素的定位
				 * 		-可选值：
				 * 			static：默认值，元素没有开启定位
				 * 			relative：开启元素的相对定位
				 * 			absolute：开启元素的绝对定位
				 * 			fixed：开启元素的固定定位（也是绝对定位的一种）
				 */
				
				/*
				 * 当元素的position属性设置为relative时，则开启了元素的相对定位
				 * 	1.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化
				 *  2.相对定位是相对于元素在文档流中原来的位置进行定位
				 * 	3.相对定位的元素不会脱离文档流
				 * 	4.相对定位会使元素提升一个层级
				 * 	5.相对定位不会改变元素的性质，块还是块，内联还是内联
				 */
				position: relative;
				
				
				/*
				 * 当开启了元素的定位（position属性值是一个非static的值）时，
				 * 	可以通过left right top bottom四个属性来设置元素的偏移量