033_CSS相对定位

最新推荐文章于 2025-01-20 22:14:23 发布

自由与束缚JavaJavaScript

最新推荐文章于 2025-01-20 22:14:23 发布

阅读量148

点赞数

分类专栏： css学习文章标签： css web前端

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/109126372

版权

css学习专栏收录该内容

52 篇文章

订阅专栏

1. CSS相对定位

1.1. 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位, 它将出现在它所在的位置上。然后, 可以通过设置垂直或水平位置, 让这个元素"相对于"它的起点进行移动。

1.2. 如果将top设置为20px, 那么框将在原位置顶部下面20像素的地方。如果left设置为30像素, 那么会在元素左边创建30像素的空间, 也就是将元素向右移动。

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

1.3. 如下图所示:

1.4. 注意, 在使用相对定位时, 无论是否进行移动, 元素仍然占据原来的空间。因此, 移动元素会导致它覆盖其它框。

2. 相对定位例子

2.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>相对定位</title>
		<meta charset="utf-8" />

		<style type="text/css">
			#img1 {
				background: red;
			}
			#img2 {
				background: blue; 
				position: relative; 
				top: 20px; 
				left: 30px;
			}
			#img3 {
				background: green;
			}
		</style>
	</head>
	<body>
		<img src="CrashBtn.png" id="img1" /><img src="MagicBtn.png" id="img2" /><img src="RefreshBtn.png" id="img3" />
		3.一切皆为框3.1.div、h1或p元素常常被称为块级元素。这意味着这些元素显示为一块内容, 即"块框"。3.2.img等元素称为"行内块元素", 意味着这些元素在行内显示为一块内容, 即"行内块框"。3.3.span和strong等元素称为"行内元素", 这是因为它们的内容显示在行中, 即"行内框"。
	</body>
</html>

2.2. 效果图