CSS之定位（绝对定位）

最新推荐文章于 2023-10-21 09:42:12 发布

不动声色的小蜗牛

最新推荐文章于 2023-10-21 09:42:12 发布

阅读量345

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_45720626/article/details/107379386

版权

CSS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

绝对定位：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>绝对定位</title>
		<style>
			body{
				font-size: 60px;
				position: relative;
				
			}
			.box1{
				width: 200px;
				height: 200px;
				background-color: #bfa;
			}
			.box2{
				width: 200px;
				height: 200px;
				background-color: orange;
				/*
					绝对定位
						-当元素的position属性值设置为absolute，则开启元素的绝对定位
						-绝对定位的特点：
							1、开启绝对定位后，如果不设置偏移量，元素的位置不会发生变化
							2、开启绝对定位后，元素会从文档流中脱离
							3、绝对定位会改变元素的性值，行内变成块，块的高度被内容撑开
							4、绝对定位会使元素提升一个层级
							5、绝对定位元素是相对于其包含块进行定位的
							
							包含块（containing block）
								-正常情况下：
									包含块就是离当前元素最近的祖先块元素
								
								-绝对定位的包含块：
									包含块就是离它最近的开启了定位的祖先元素，
										如果所有的祖先元素都没有开启定位则根元素就是它的包含块
								-html（根元素、初始包含块）
									
				 */
				
				position: absolute;
				top: 0px;
				left: 0px;
			}
			.box3{
				width: 200px;
				height: 200px;
				background-color: yellow;
			}
			.box4{
				width: 400px;
				height: 400px;
				background-color: tomato;
			}
			.box5{
				width: 300px;
				height: 300px;
				background-color: aliceblue;
			}
		</style>
	</head>
	<body>
		<div class="box1">1</div>
		
		<div class="box4">
			4
			<div class="box5">
				5
				<div class="box2">2</div>
			</div>
		</div>

		<div class="box3">3</div>
	</body>
</html>

不动声色的小蜗牛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS之定位（绝对定位）

绝对定位：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>绝对定位</title> <style> body{ font-size: 60px; position: relative; } .box1{ width: 200px; height: 200px; b
复制链接

扫一扫