相对定位
1.定位流分类
1.1相对定位
1.2绝对定位
1.3固定定位
1.4静态定位
2.什么是相对定位?
position:relative ；
left:值；
right:值；
top:值；
bottom:值；
相对定位就是相对于自己以前在标准流中的位置来移动
3.相对定位注意点
3.1相对定位是不脱离标准流的, 会继续在标准流中占用一份空间
3.2在相对定位中同一个方向上的定位属性只能使用一个
3.3由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素
3.4由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局
也就是设置margin和padding的值会以没有定位之前的那个元素为标准。
4.相对定位应用场景
4.1用于对元素进行微调
4.2配合后面学习的绝对定位来使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>75-定位流</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
}
.box1{
background-color: red;
}
.box2{
background-color: green;
position: relative;
top: 20px;
left: 20px;
/*right: 20px;*/
/*margin-bottom: 20px;*/
margin-top: 20px;
}
.box3{
background-color: blue;
}
span{
position: relative;
width: 100px;
height: 100px;
background-color: red;
}
input{
width: 200px;
height: 50px;
}
img{
width: 100px;
height: 50px;
position: relative;
top: 20px;
}
</style>
</head>
<body>
<!--
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<span>我是span</span>
-->
<input type="text" name="" id="">
</body>
</html>
绝对定位
position:absolute ；
left:值；
right:值；
top:值；
bottom:值；
1.什么是绝对定位?
绝对定位就是相对于body来定位
2.绝对定位注意点
2.1绝对定位的元素是脱离标准流的
2.2绝对定位的元素是不区分块级元素/行内元素/行内块级元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>76-定位流-绝对定位</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
}
.box1{
background-color: red;
}
.box2{
background-color: green;
position: absolute;
/*float: left;*/
left: 0;
/*right: 0;*/
/*top: 0;*/
bottom: 0;
}
.box3{
background-color: blue;
}
span{
position: absolute;
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<!--<span>我是span</span>-->
</body>
</html>
参考点
1.规律
1.默认情况下所有的绝对定位的元素, 无论有没有祖先元素, 都会以body作为参考点
2.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点
2.1只要是这个绝对定位元素的祖先元素都可以
2.2指的定位流是指绝对定位/相对定位/固定定位
2.3定位流中只有静态定位不行
3.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 而且祖先元素中有多个元素都是定位流, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点
注意点
1.如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点
2.一个绝对定位的元素会忽略祖先元素的padding
子绝父相
1.相对定位弊端:
相对定位不会脱离标准流, 会继续在标准流中占用一份空间, 所以不利于布局界面
2.绝对定位弊端:
默认情况下绝对定位的元素会以body作为参考点, 所以会随着浏览器的宽度高度的变化而变化
3.子绝父相
子元素用绝对定位, 父元素用相对定位
绝对定位水平居中
1.如何让绝对定位的元素水平居中
只需要设置绝对定位元素的left:50%;
然后再设置绝对定位元素的 margin-left: -元素宽度的一半px;
固定定位
1.什么是固定定位?
position:fixed ；
left:值；
right:值；
top:值；
bottom:值；
固定定位和前面学习的背景关联方式很像, 背景定位可以让背景图片不随着滚动条的滚动而滚动, 而固定定位可以让某个盒子不随着滚动条的滚动而滚动
注意点:
1.固定定位的元素是脱离标准流的, 不会占用标准流中的空间
2.固定定位和绝对定位一样不区分行内/块级/行内块级
应用场景：首行固定，以及做广告
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>84-固定定位-应用场景</title>
<style>
*{
margin: 0;
padding: 0;
}
.nav{
width:100%;
height: 45px;
background: url("images/nav.png") no-repeat center top;
position: fixed;
top: 0;
}
.content{
width:100%;
height: 8250px;
background: url("images/content.png") no-repeat center top;
}
div img:first-child{
position: fixed;
left: 0;
top: 200px;
}
div img:last-child{
position: fixed;
right: 0;
top: 200px;
}
a{
position: fixed;
right: 10px;
bottom: 10px;
width: 50px;
/*height: 50px;*/
background-color: rgba(0,0,0,0.3);
text-align: center;
line-height: 50px;
text-decoration: none;
}
</style>
</head>
<body>
<div class="nav"></div>
<div class="content">
</div>
<a href="#">返回</a>
</body>
</html>
z-index
1.什么是z-index属性?
默认情况下所有的元素都有一个默认的z-index属性, 取值是0.
z-index属性的作用是专门用于控制定位流元素的覆盖关系的
1.默认情况下定位流的元素会盖住标准流的元素
2.默认情况下定位流的元素后面编写的会盖住前面编写的
3.如果定位流的元素设置了z-index属性, 那么谁的z-index属性比较大, 谁就会显示在上面
注意点:
1.从父现象
1.1如果两个元素的父元素都没有设置z-index属性, 那么谁的z-index属性比较大谁就显示在上面
1.2如果两个元素的父元素设置了z-index属性, 那么子元素的z-index属性就会失效, 也就是说谁的父元素的z-index属性比较大谁就会显示在上面
网友评论