01 Positiion
position属性指定一个元素(静态的，相对的，绝对或固定)的定位方法的类型。
-
absolute
生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位
元素的位置通过left top right 以及 bottom属性进行规定 -
fixed
生成绝对定位的元素，相对于浏览器窗口进行定位
元素的位置通过left top right 以及 bottom属性进行规定 -
relative
生成相对定位的元素，相对于其正常位置进行定位
因此，left:20 会向元素的LEFT位置添加20像素 -
static
默认值。没有定位，元素出现在正常的流中(忽略top/bottom/left/right或者z-index声明)
02 相对定位
上案例
<style>
div{
width: 200px;
height: 200px;
}
#box1{
background: red;
}
#box2{
background: green;
/* 相对定位 */
position: relative;
/* 移动定位元素 */
}
#box3{
background: blue;
}
</style>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
浏览器显示结果
我们可以发现，我们给第二个子元素（绿色）加上相对定位时并没有什么变化
我们可以通过left top right 以及 bottom属性进行规定
接下来，我们给它加上top和left试一试
#box2{
background: green;
/* 相对定位 */
position: relative;
/* 移动定位元素 */
top:200px;/*bottom*/
left: 200px;/*right*/
}
浏览器显示结果
可以发现它相对于之前的位置向下移动200px，向右移动200px
而且定位之后，它原有的物理位置依旧保留
小结：
以当前为参照物移动指定的距离
注意：相对定位，被定位的元素会占据原有的物理位置
03 绝对定位
还是原来的案例
<style>
div{
width: 200px;
height: 200px;
}
#box1{
background: red;
}
#box2{
background: green;
/* position: absolute; */
}
#box3{
background: blue;
}
</style>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
我们给我们第二个元素加上绝对定位
#box2{
background: green;
position: absolute;
}
我们会发现蓝色不见了篮球去哪里了？蓝色被绿色盖住了
也就是说，一旦我元素做绝对定位以后，就不再占用原有的物理位置了
绝对定位小结：绝对定位的元素不会占据原有的物理位置
我们给它加上top和left
#box2{
background: green;
position: absolute;
top:200px;
left: 200px;
}
浏览器显示结果
所以说绝对定位的参考点是浏览器的body
所以说绝对定位是以其他元素作为参照物移动指定距离的定位方式
关于绝对定位点的参考点
- 如果元素的外层元素是非static(也就是说除了默认值之外的定位位置)
那么这个外层元素就成为该元素的定位参考点 - 如果元素的外层元素没有设置任何position的值，
那么该元素将寻找距离自己最近的其他设定position的外层元素作为参照物(必须为嵌套层) - 如果该元素的外层元素没有任何一个元素采用position定位，那么此时定位参考元素变为body或者说页面
现在我们来设置一个单独的嵌套
<div id="box1"></div>
<div id="box2">
<div id="father">
<div id="son"></div>
</div>
</div>
<div id="box3"></div>
他们之间分别加上宽高和背景颜色
#box2{
width: 500px;
height: 500px;
background: green;
/* 绝对定位
绝对定位的元素不会占据原有的物理位置
是以其他元素作为参照物移动指定距离的定位方式
关于绝对定位点的参考点
1. 如果元素的外层元素是非static(也就是说除了默认值之外的定位位置)
那么这个外层元素就成为该元素的定位参考点
2. 如果元素的外层元素没有设置任何position的值，
那么该元素将寻找距离自己最近的其他设定position的外层元素作为参照物(必须为嵌套层)
3. 如果该元素的外层元素没有任何一个元素采用position定位，那么此时定位参考元素变为body或者说页面
*/
/* position: absolute;
top:200px;
left: 200px; */
}
#father{
width: 200px;
height: 200px;
background: yellow;
}
#son{
width: 100px;
height: 100px;
background: grey;
}
此时浏览器显示效果：
现在我们给儿子加上绝对定位
#son{
width: 100px;
height: 100px;
background: grey;
position: absolute;
top:100px;
left: 100px;
}
可以发现它是以浏览器为参考点的
这个时候我们给他的父元素做定位
#father{
width: 200px;
height: 200px;
background: yellow;
/* 给父类做一个定位 */
position: relative;
}
#son{
width: 100px;
height: 100px;
background: grey;
position: absolute;
top:100px;
left: 100px;
}
我们可以发现它就以它的父元素作为参照物了
也就是说如果它的外层有定位，那么它的参考点就是它的父类
此时如果父类不定位，那么参考点就是浏览器了
那么如果此时不给它的父亲定位，而是给它的爷爷定位会怎么样呢、？
浏览器显示结果：
如果元素的外层元素没有设置任何position的值，
那么该元素将寻找距离自己最近的其他设定position的外层元素作为参照物(必须为嵌套层)
04 固定定位
<style>
div{
height: 1000px;
background: black;
}
#box{
width: 110px;
height: 300px;
background:grey;
position: fixed;
right: 0;
top:300px;
}
</style>
</head>
<body>
1
<div>
<div id="box"></div>
</div>
2
</body>
浏览器显示结果
05 z-index
z-index堆积顺序
- 一旦修改了元素的定位方式，则元素可能会发生堆叠
- 可以使用z-index属性来控制元素框出现的重叠顺序
- z-index仅能在定位的元素上生效
- z-index属性
值为数值，数值越大表示堆叠顺序越高，即离用户越近
可以设置为负值，表示离用户更远，一般不要设置
z-index仅能在定位元素上奏效
我们看代码吧
<style>
#one{
width: 200px;
height: 200px;
background: red;
position: absolute;
top:100px;
left:100px;
}
#two{
width: 200px;
height: 200px;
background:yellow;
position: absolute;
top: 150px;
left: 150px;
}
</style>
</head>
<body>
<div id="one"></div>
<div id="two"></div>
</body>
浏览器显示结果
此时的显示结果是没有任何问题的，但是如果我们想要让红色的堆叠在黄色的前面
我们可以这样给想要显示在前面的红色加以下代码
z-index: 1;
好啦，定位就到这里了哦~
得闲就多实践吧
