CSS定位技术的全面解析

使用定位可以将元素放到网页的任意位置。

相对定位

相对定位——

1.参照自己原来的位置安装边偏移设置盒子的位置。

2.不脱标，占位，原来的位置还留着不会被别人挤占。

3.标签显示模式不变。

工作中一般相对定位不是单独使用的，因为原来位置会留白。

绝对定位——

1. 脱标，不占位

2. 参照物：先找最近的已经定位的祖先元素；如果所有祖先元素都没有定位，参照浏览器可视区改位置

3. 显示模式特点改变：宽高生效（具备了行内块的特点

.news {

position: relative;

margin: 100px auto;

width: 400px;

height: 350px;

background-color: #f8f8f8;

}

.news span {

top: 0;

right: 0;

display: block;

width: 92px;

height: 32px;

background-color: rgba(0,0,0,0.6);

text-align: center;

line-height: 32px;

color: #fff;

}

父级一定要设置position: relative，不然就会按浏览器的位置发生偏移。

定位居中

第一种方式，使用absolute，margin-left，margin-top,left,top来实现。

<style>

img{

left: 50%;

top:50%;

margin-left: -265px;

margin-top: -177px;

/* transform: translate(-50%,-50%);*/

}

</style>

第二种方式，使用transform: translate(-50%,-50%);来替代margin-left,margin-top,用来设置偏移自身长度的-50%。

固定定位

<style>

* {

margin: 0;

padding: 0;

}

/*

1. 脱标，不占位

2. 参照物：浏览器窗口

3. 显示模式特点 具备行内块特点

*/

div {

position: fixed;

top: 0;

right: 0;

width: 500px;

}

</style>

堆叠层级

<style>

div {

width: 200px;

height: 200px;

}

.box1 {

background-color: pink;

/* 取值是整数，默认是0，取值越大显示顺序越靠上 */

z-index: 1;

}

.box2 {

background-color: skyblue;

left: 100px;

top: 100px;

z-index: 2;

}

</style>

效果如下

定位总结