定位与层级梳理
相对定位
栗子1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.position {
width: 100px;
height: 100px;
background: red;
position: relative;
/* 相对位置，依然处在标准流中*/
/*top,right,bottom,left来控制位置的改变,以网页的左上角为起点，进行上下左右的移动，位置可为负*/
left: 100px;
top: 200px;
}
</style>
<body>
<div class="position"></div>
</body>
</html>
栗子2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.normal {
width: 100px;
height: 100px;
background: blue;
}
.position {
width: 100px;
height: 100px;
background: red;
position: relative;
/* 相对位置，依然处在标准流中*/
/*top,right,bottom,left来控制位置的改变,以网页的左上角为起点，进行上下左右的移动，位置可为负*/
left: 100px;
top: 100px;
}
</style>
<body>
<!--相对定位不会占用普通元素的空间-->
<div class="normal"></div>
<div class="position"></div>
</body>
</html>
测试结果：
--------------------------------------------------------------------
绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
</head>
<style>
* {
margin: 0px;
padding: 0px;
}
.grandpa {
width: 500px;
height: 500px;
background: black;
margin: 500px;
position: absolute;
}
.parent {
width: 300px;
height: 300px;
background: blue;
margin: 200px;
position: absolute;
}
.position {
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 100px;
top: 100px;
/* 特性：如果我的父元素没有定位属性，我则以浏览器的四个顶点为初始位置进行定位。除非父元素带有position：relativeabsolute/fixed属性。如果父元素还有父元素，孙元素同理*/
/*?????????? 实际测试，子元素和孙元素不管爷元素有无定位属性，也以爷元素四个顶点定位移动*/
/*left: 100px;
top: 200px;*/
/*设置left和top的时候是以浏览器的左上角进行移动*/
/*right: 100px;
top: 200px;*/
/*设置right和top的时候是以浏览器的右上角进行移动*/
/*left: 100px;
bottom: 200px;*/
/*设置left和bottom的时候是以浏览器的左下角进行移动*/
/*right: 100px;
bottom: 200px;*/
/*设置right和bottom的时候是以浏览器的右下角角进行移动*/
}
</style>
<body>
<div class="grandpa">
<div class="parent">
<div class="position"></div>
</div>
</div>
</body>
</html>
--------------------------------------------------------------------
固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.parent {
width: 300px;
height: 300px;
background: blue;
position: absolute;
}
.position {
width: 100px;
height: 100px;
background: red;
position: fixed;
/*固定定位和绝对定位类似，以浏览器四个顶点来定位*/
/*top,right,bottom,left来控制位置的改变,以网页的左上角为起点，进行上下左右的移动，位置可为负*/
/*left: 100px;
top: 200px;*/
/*设置left和top的时候是以浏览器的左上角进行移动*/
/*right: 100px;
top: 200px;*/
/*设置right和top的时候是以浏览器的右上角进行移动*/
/*left: 100px;
bottom: 200px;*/
/*设置left和bottom的时候是以浏览器的左下角进行移动*/
/*right: 100px;
bottom: 200px;*/
/*设置right和bottom的时候是以浏览器的右下角角进行移动*/
/*明显区别：和绝对定位虽然很相似，但有一个非常明显的区别，固定定位不受制于任何的属性*/
right: 20px;
bottom: 40px;
}
</style>
<body>
<div class="parent">
<div class="position"></div>
</div>
</body>
</html>
--------------------------------------------------------------------
层级梳理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层级关系</title>
<!--层级关系z-index服务于所有的定位属性
层级越大，越浮在上方
z-index能够设置所有定位属性的元素的层级，数字越大，层级越大
如果元素未设置层级，默认层级关系：在下面的元素层级大于上面的元素-->
</head>
<style>
* {
margin: 0px;
padding: 0px;
}
.abs01 {
width: 100px;
height: 100px;
background: red;
position: absolute;
z-index: 0;
left: 10px;
top: 10px;
}
.abs02 {
width: 200px;
height: 200px;
background: #aaccdd;
position: absolute;
z-index: 1;
left: 40px;
top: 40px;
}
</style>
<body>
<div class="abs01"></div>
<div class="abs02"></div>
</body>
</html>
测试结果：
综合栗子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位综合</title>
<!--相对定位仍处于标准流里面
绝对定位是以浏览器的四个顶点为初始位置，受制于定位属性
与固定定位不同的是，不受制于定位属性
-->
</head>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
background: url(images/background_03.jpg) no-repeat;
}
.test {
width: 300px;
height: 2000px;
background: #cccccc;
}
/*不会影响到标准流里面的div，还处于标准流里面*/
.rel {
width: 100px;
height: 100px;
background: red;
position: relative;
left: 0;
top: 0;
}
/*绝对定位就不一样了，会跳出标准流*/
.abs {
width: 100px;
height: 100px;
background: green;
position: absolute;
/*left: 100px;
top: 100px;*/
/*初始位置也是以整个浏览器四个角为起点
但和固定定位有个区别*/
left: 100px;
top: 1000px
}
.fix {
width: 100px;
height: 100px;
background: black;
position: fixed;
/*位置在网页下方,一个屏的网页高度小于1000px*/
left: 100px;
top: 1000px;
}
</style>
<body>
<div class="test"></div>
<div class="rel"></div>
<div class="abs"></div>
<div class="fix"></div>
</body>
</html>
707
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
