position属性的详情

最新推荐文章于 2022-06-28 11:11:41 发布

caa112

最新推荐文章于 2022-06-28 11:11:41 发布

阅读量231

点赞数

分类专栏： html定位问题文章标签： html position relative absolute 定位

本文链接：https://blog.csdn.net/caa112/article/details/102094967

版权

html定位问题专栏收录该内容

0 篇文章 0 订阅

订阅专栏

position属性的详情

首先了解文档流的概念：
一、文档流
概念：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。
1.元素分为块级元素（block）和内联元素（inline）

块级元素	内联元素
独占一行，默认情况下，其宽度自动填满父元素宽度	相连的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随着元素的内容而变化
可以设置width,height，margin,padding属性	行内元素设置width,height,margin无效，对border，padding有效
相邻的margin会重叠，以最大的margin为准。例如：上一块级的margin-bottom跟下一块级的margin-top,会重叠一起，哪个大算哪个

2.脱离文档流： --------------脱离文档流情况的详情

使得元素脱离文档流，分别是：浮动，定位的fixed,absolute
  为什么说relativen没有脱离文档流呢？？
  因为relative的时候，margin-top会重叠。跟块级元素一样，而fixed，absolute不会。
   脱离文档流的元素都是块级元素---因为就算是行内元素，遇到浮动，absolute，fixed让行内元素变成块级元素来对待。

二、position的各个值(按照使用频繁情况排序)
2.1:relative（相对定位）：相对于最近的父元素来定位，其父元素可以为position的所有属性值。
2.2:absolute（绝对定位）：相对于最近的父元素来定位，其父元素可以为除了static值以外的三个position值（或者说是其最近的任意父元素）。
2.3：fixed(固定定位)：相对于窗口（父元素）来定位，（效果）带有fixed值得子元素会固定在页面，不会随滚动条而发生位置变化。
2.4：static（静态定位）：默认值，写不写区别不大。
2.5：sticky（粘性定位）：在relative和fixed定位之间切换。一开始是按照relative,当滚动条滚下去的时候，看不到原来位置的时候，就会按照fixed来。
代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>position</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		body{
			width: 900px;
			height: 900px;
			background-color: aqua;
		}
			#container{
				position: absolute;
				left: 300px;
				top:300px;
				width: 700px;
				height: 700px;
				background-color: cadetblue;
			}
				#box{
					width: 600px;
					height: 600px;
					background-color: chartreuse;
				}
				#boxTop{
					position: relative;
					width: 400px;
					height: 400px;
					background-color: coral;
				}
				#boxBody{
					position: absolute;
					left: 50px;
					top: 40px;
					width: 300px;
					height: 300px;
					background-color: darkcyan;
					
				}
				#boxBottom{
					position: fixed;
					left: 50px;
					top: 40px;
					width: 150px;
					height: 150px;
					background-color: darkorchid;
				}
				#stick{
					position:sticky;
					left:20px;
					top:50px;
					width:50px;
					height:50px;
					background-color:green;
				}
	</style>
</head>
<body>
	<div id="container">absoulte
		<div id="box">默认
			<div id="boxTop">relative
				<div id="boxBody">absolute
					<div id="boxBottom">fixed</div>
					<div id="stick">sticky</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>