CSS-定位

最新推荐文章于 2022-10-31 20:27:35 发布

guardwhy

最新推荐文章于 2022-10-31 20:27:35 发布

阅读量134

点赞数

本文链接：https://blog.csdn.net/hxy1625309592/article/details/109807646

版权

本文详细介绍了CSS中的定位概念，包括相对定位、绝对定位和固定定位。相对定位不脱离标准流，而绝对定位相对于body或最近定位祖先元素定位，固定定位则完全脱离标准流。此外，还探讨了z-index属性在定位中的作用，以及不同定位方式的特点和应用场景。

摘要由CSDN通过智能技术生成

1.1 相对定位

什么是相对定位

相对定位就是相对于自己以前在标准流中的位置来移动。

相对定位特点

相对定位是不脱离标准流的, 会继续在标准流中占用一份空间。在相对定位中同一个方向上的定位属性只能使用一个。
由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素。
由于相对定位是不脱离标准流的,并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>相对定位</title>
  <style type="text/css">
	*{
    
		margin: 0;
		padding: 0;
	}

	div{
    
		width: 100px;
		height: 100px;
	}

	.box1{
    
		background-color: red;
	}

	.box2{
    
		background-color: green;
		position: relative;
		top: 20px;
        left: 20px;
		/*right: 20px;*/

		/*margin-bottom: 20px;*/
		margin-top: 20px;
	}
	.box3{
    
		background-color: cyan;
	}

	span{
    
		position: relative;
		width: 100px;
		height: 100px;
		background-color: red;
	}
  </style>
</head>
<body>
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box3"></div>

	<span>java搭建网站</span>
</body>
</html>

执行结果

1.2 绝对定位

1.2.1 什么是绝对定位

绝对定位就是相对于body来定位。

绝对定位特点

绝对定位的元素是脱离标准流的
绝对定位的元素是不区分块级元素/行内元素/行内块级元素

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>绝对定位</title>
  <style type="text/css">
	*{
    
		margin: 0;
		padding: 0;
	}
	div{
    
		width: 150px;
		height

最低0.47元/天解锁文章

guardwhy

关注

0
点赞
踩
1

收藏

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

11.1 相对定位什么是相对定位相对定位就是相对于自己以前在标准流中的位置来移动。相对定位特点相对定位是不脱离标准流的, 会继续在标准流中占用一份空间。在相对定位中同一个方向上的定位属性只能使用一个。由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素。由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局。代码示例<!DOCTYPE html&
复制链接

扫一扫