前端入门笔记之css（6）
定位的含义： 属性允许你对元素进行定位。（想放在哪里就放在哪里）
相对定位：如对一个元素进行相对定位，它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
- 不会影响原来的位置（保留原来的位置）
- 显示的元素会改变位置
- 从最早的(默认）位置里进行定位
常用属性:
position:把元素放置到一个静态的,相对的，绝对的，或固定的位置中。
{position:relative}===>{定位：定位类型}
- right: 定义了定位元素右外边距边界与其包含块右边界之间的偏移
- left: 定义了定位元素左外边距边界与其包含块左边界之间的偏移
(左右，只能选择一个） - bottom: 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
- top:定义了定位元素的上外边距边界与其包含块上边界之间的偏移量
（上下，只能选择什么）
配套使用：
{position: relative;left: 200px;top: 200px；}
1、div的移动：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}/*外边距为0，内边距为0*/
#d1{
width: 200px;
height: 200px;
background-color: red;
float: left;/*浮动，从左开始*/
position: relative;/*相对自己原来的位置进行定位*/
left: 200px;/*相对原来的位置向右移动200px*/
top: 200px;/*相对原来的位置向左移动200px*/
}
#d2{
width: 200px;
height: 200px;
background-color: green;
float: left;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>
结果截图：
2、z-index的使用
当两个div或其他元素相等大小，相同位置的时候，会有一个不被显示（覆盖）
想要显示自己指定的元素显示时，就应该用z-index。
z-index用法代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*相对定位不会影响原来的位置（保留原来的位置）
显示的元素会改变位置
从最早的(默认）位置里进行定位*/
*{margin: 0;padding: 0;}/*外边距为0，内边距为0*/
#d1{
width: 200px;
height: 200px;
background-color: red;
float: left;/*浮动，从左开始*/
position: relative;/*相对自己原来的位置进行定位*/
left: 200px;/*相对原来的位置向右移动200px*/
z-index: 2;/*比较z-index后面的两个数，谁的数字大就显示谁，也可以是负数*/
}
#d2{
width: 200px;
height: 200px;
background-color: green;
float: left;
position: relative;/*必须写这行代码，否则不执行z-index*/
z-index: 1;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>
结果截图：
596
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
