定位:将盒子放在页面任意指定位置
定位的属性:
position:relative|absolute|fixed
relative:相对定位,相对于自己原理的位置进行定位
absolute:绝对定位,相对于父元素进行定位
情景1:如果父级没有定位,相对于body进行定位
fixed:固定定位,相对于浏览器窗口进行定位
定位位移:px 像素 %百分比
此处上下左右指的是盒子的上下左右边框
top:距离上边的距离------下正上负
bottom:距离下边的距离-----上正下负
left:距离左边的距离-------右正左负
right:距离右边的距离------左正右负
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>1104--定位</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1 {
height: 100px;
background-color: yellow;
}
.box {
width: 200px;
height: 200px;
background-color: red;
/* 相对定位 */
position: relative;
bottom: 0px;
right: 0px;
}
.box2 {
width: 200px;
height: 200px;
background-color: rgb(68, 255, 0);
/* 绝对定位 */
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
/* 子绝父相的css样式 */
.farther {
width: 200px;
height: 200px;
background-color: red;
/* 相对定位 */
position: relative;
/* 水平居中 ------盒子中心位于页面中间*/
left: 50%;
/* left: 50%;是以盒子左边为参照,移动到页面中间位置 */
margin-left: -100px;
/* 使盒子中心移动到中心 */
}
.farther .son {
width: 100px;
height: 100px;
background-color: rgb(68, 255, 0);
/* 绝对定位 */
position: absolute;
/* 父级中央-----son盒子中心为参照 */
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
margin: auto;
}
/* 固定定位 ----position: fixed;*/
.fixed {
width: 200px;
height: 200px;
background-color: pink;
/* 固定定位 */
position: fixed;
right: 10px;
bottom: 30px;
}
/* 定层的css样式设置 */
.one {
width: 200px;
height: 200px;
background-color: red;
position: relative;
left: 0px;
top: 0px;
/* 定层 */
z-index: 5;
}
.two {
width: 400px;
height: 400px;
background-color: green;
position: relative;
left: 50px;
top: 50px;
/* 定层 */
}
.three {
width: 600px;
height: 600px;
background-color: blue;
position: relative;
left: 100px;
top: 100px;
/* 定层 */
z-index: 3;
}
</style>
</head>
<body>
<h1>相对定位</h1>
<div class="box">相对定位</div>
<br /><br /><br /><br />
<h1>绝对定位</h1>
<div class="box2">绝对定位</div>
<br /><br /><br /><br />
<!-- 子绝(绝对定位)父相(相对定位) -->
<h1>子绝父相</h1>
<div class="farther">
father
<div class="son">son</div>
</div>
<br /><br /><br /><br />
<div class="fixed">固定定位盒子</div>
<h1>固定定位</h1>
、 <br /><br /><br /><br />
<h1>定层(定位里的层次)</h1>
<div class="one">定层1</div>
<div class="two">定层2</div>
<div class="three">定层3</div>
</body>
</html>
总结:
1、相对定位:相对于自己原理的位置进行定位,不会脱离文档流,位置空间不会释放
2、绝对定位:相对于最近的一个定位祖先进行定位,如果没有相对于body进行定位,会脱离文档流,位置空间释放
3、子绝(绝对定位absolute)父相(相对定位relative)
4、固定定位,相对于浏览器窗口进行定位,会脱离文档流,位置空间释放
5.定层-----z-index:数字 ------数字越大盒子越上面(绝对定位使用)