前端基础——定位（position）

relative相对定位/定位偏移量

position:relative; 相对定位

a、不影响元素本身的特性；

b、不使元素脱离文档流（元素移动之后原始位置会被保留）；

c、如果没有定位偏移量，对元素本身没有任何影响；

d、提升层级

 

定位元素位置控制

top/right/bottom/left 定位元素偏移量。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 200px;
				height: 200px;
			}
			.div1{
				background-color: red;
			}
			.div2{
				/*margin-top: 200px;
				margin-left: 200px;*/
				position: relative;
				left:200px;
				top:200px;
				background-color: blue;
			}
			.div3{
				background-color: green;
			}
		</style>
		<!--
			相对定位的特征
			a、不影响元素本身的特性；
			b、不使元素脱离文档流（元素移动之后原始位置会被保留）；
			c、如果没有定位偏移量，对元素本身没有任何影响；只写position: relative;没影响
			d、提升层级
		-->
	</head>
	<body>
		<div class="div1">div1</div>
		<div class="div1">div1</div>
		<div class="div2">div2</div>
		<div class="div3">div3</div>
	</body>
</html>

　　

absolute绝对定位/定位层级

position:absolute; 绝对定位

a、使元素完全脱离文档流；

b、使内嵌支持宽高；

c、块属性标签内容撑开宽度；

d、如果有定位父级相对于定位父级发生偏移，没有定位父级相对于document发生偏移；

e、相对定位一般都是配合绝对定位元素使用；

f、提升层级

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				/*margin:0;*/  /*body有个默认样式，在谷歌浏览器中margin：8px;*/
				position: relative;
			}
			div{
				width: 200px;
				height: 200px;
			}
			.div1{
				background-color: red;
			}
			.div2{
				position: absolute;
				left:200px;
				top:400px;
				background-color: blue;
			}
			.div3{
				position: absolute;
				top: 400px;
				background-color: green;
			}
		</style>
		<!--
			绝对定位的特征
			a、使元素完全脱离文档流；
			b、使内嵌支持宽高；
			c、块属性标签内容撑开宽度；
			d、如果有定位父级相对于定位父级发生偏移，没有定位父级相对于document（指的是可视区域）发生偏移；
			e、相对定位一般都是配合绝对定位元素使用；
			f、提升层级

		-->
	</head>
	<body>
		<div class="div1">div1</div>
		<div class="div2">div2</div>
		<div class="div3">div3</div>
	</body>
</html>

　　

z-index:[number]； 定位层级

a、定位元素默认后者层级高于前者；

b、建议在兄弟标签之间比较层级

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 300px;
				height: 300px;
			}
			.box{
				margin: 100px auto;
				position: relative;
			}
			.content{
				position: absolute;
				background-color: blue;
				left: -6px;
				top: -6px;
				z-index: 2; /*提升层级,想要在前面,就要大于后面的z-index*/
			}
			.mark{
				position: absolute;
				background-color: black;
				right: -6px;
				bottom: -6px;
				z-index: 1;
				opacity: 0.5;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="content"></div>
			<div class="mark"></div>
		</div>
	</body>
</html>

　　

position:fixed； 固定定位

与绝对定位的特性基本一致，的差别是始终相对整个文档（即浏览器的可是区域）进行定位；

问题：IE6不支持固定定位；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				height: 3000px;
			}
			div{
				width: 100px;
				height: 100px;
				background-color: red;
				position: fixed;
				right: 0;
				bottom: 0;
			}
		</style>
	</head>
	<body>
		<div>返回顶部</div>
	</body>
</html>

　　

定位其他值：

position:static ； 默认值

position:inherit ; 从父元素继承定位属性的值 (不兼容)

position:relative | absolute | fixed | static | inherit;

定位清浮动方法、遮罩滤镜

position:absolute; 绝对定位元素子级的浮动可以不用写清浮动方法；

position:fixed; 固定定位元素子级的浮动可以不用写清浮动方法；（IE6不兼容）

遮罩弹窗（优酷弹窗）

标准 不透明度： opacity:0~1;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 500px;
				height: 500px;
				background-color: blue;
				color: red;
				font-size: 48px;
				background-color: red;
				opacity: 0.2;
			}
			p{
				width: 300px;
				height: 300px;
				background-color: blue;
			}
			span{
				font-size: 48px;
				color: red;
			}
		</style>
	</head>
	<body>
		<div>
			<p></p>
		</div>
		<span>学习透明度opacity</span>
	</body>
</html>

　　

IE 滤镜： filter:alpha(opacity=0~100);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 300px;
				height: 300px;
				background-color: red;
				filter:alpha(opacity=50); 
				opacity: 0.5;
			}
		</style>
		<!--
			IE6、7下的透明度设置
			filter:alpha(opacity=0 ~ 100); 
		-->
	</head>
	<body>
		<div></div>
	</body>
</html>

　　

posted @ 2018-03-04 18:36  千行路  阅读(649)  评论(0)    收藏  举报