面试必问——定位position

最新推荐文章于 2022-08-01 17:10:50 发布

小莉爱编程

最新推荐文章于 2022-08-01 17:10:50 发布

阅读量299

点赞数

分类专栏：面试文章标签： css html5

本文链接：https://blog.csdn.net/qq_45018844/article/details/112178942

版权

面试专栏收录该内容

7 篇文章 1 订阅

订阅专栏

定位的属性

static(默认值）
absolute（绝对定位）
relative（相对定位）
fixed（固定定位）

static

是position的默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index）

absolute绝对定位

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定
例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		* {
			padding: 0px;
			margin: 0px;
		}
		#container{
			width: 500px;
			height: 900px;
			position: relative;
			background-color: #333333;
			}
			#myPageTop {
				width: 50%;
				height: 100px;
				top: 50px;
				left: 50px;
				background-color: #FF0000;
				position: absolute;
			}
	</style>
	<body>
		<div id="container">
			<div id="myPageTop">
				
			</div>
		</div>
	</body>
</html>

一般都是跟相对定位一起使用，（子绝父相）子元素使用绝对定位，父元素使用相对定位，如果父元素用的绝对，绝对定位脱离文档流，那么父元素的临近元素会与该父元素重叠
在这里插入图片描述
相对于父元素，绝对定位是相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。设置父元素相对定位，子元素绝对定位，那么子元素就是相对于这个父元素的位置来定位的。

relative相对定位

相对定位：生成相对定位的元素，相对于其正常位置进行定位。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		* {
			padding: 0px;
			margin: 0px;
		}
		#container{
			width: 100%;
			height: 900px;
			border: 1px solid red ;
			}
			#myPageTop {
				width: 50%;
				height: 100px;
				top: 50px;
				left: 50px;
				background-color: #FF0000;
				position: relative;
			}
	</style>
	<body>
		<div id="container">
			<div id="myPageTop">
				
			</div>
		</div>
	</body>
</html>

在这里插入图片描述
效果与上一个类似，上一个懂了，这个就知道了哦。

固定定位fixed

大家肯定见过很多固定定位的例子，如下：我的滚动条已经到下面了，但是这个红色的div还是在头部，没有动过，这就是固定定位了，
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		* {
			padding: 0px;
			margin: 0px;
		}
		#container{
			width: 100%;
			height: 900px;
			border: 1px solid red ;
			}
			#myPageTop {
				width: 50%;
				height: 100px;
				background-color: #FF0000;
				position: fixed;
			}
	</style>
	<body>
		<div id="container">
			<div id="myPageTop">
				
			</div>
		</div>
	</body>
</html>

小莉爱编程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
面试必问——定位position

定位的属性static(默认值）absolute（绝对定位）relative（相对定位）fixed（固定定位）static是position的默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index）absolute绝对定位生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定例子：<!DOCTYPE
复制链接

扫一扫