关于定位

1.0 定位

在页面中，布局不会首先考虑到定位，而是处理一些难度较大的盒子布局

正常情况下，能使用标准流就不会使用浮动，能使用浮动就不会使用定位

能使用宽高就不用内边距，能使用内边距，就不会用外边距

 

1.1 静态定位

静态定位一般使用在js特效的时候，会在某个状态下取消定位

使用了静态定位，遍偏移的值会失效，盒子等价于标准流

div {
    position: static;
}

 

1.2 相对定位

相对定位根据自身的位置去移动，保留自身的位置，不影响其他元素的位置

一般使用在，子元素用了绝对定位，父元素就会加上相对定位

div {
    position: relative;
    top: 10px;
    left: 20px;
}

 

1.3 绝对定位

如果包裹的外层元素没有定位

根据文档的位置去移动，不保留自身的位置（脱标），不影响其他元素的位置

如果包裹的外层元素含有相对定位或者绝对定位

根据含有定位的那个父元素去移动，不保留自身的位置（脱标），不影响其他元素的位置

div {
    position: absolute;
    top: 10px;
    left: 20px;
}

 

1.4 固定定位

固定定位根据浏览器的窗口去移动，不保留自身的位置，不影响其他元素的位置

一般使用在，固定的导航，固定的广告，固定的返回顶部信息，和底部的一些广告

div {
    position: fixed;
    top: 10px;
    left: 20px;
}

 

1.5 让元素水平垂直居中

让元素在版心的旁边，目的是不会随着浏览器宽度的大小而发生位置改变

.box {
     270px;
    height: 190px;
    position: fixed;
    left: 50%;
    bottom: 100px;
    /* 如果版心是1200  那么实际偏移距离就是版心的一半  再加上若干的距离 */
    margin-left: 610px;
}

让不规则的子元素在父盒子内水平垂直居中

.fa {
    position: relative;
     530px;
    height: 480px;
}
​
.box {
     270px;
    height: 190px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

正常情况后来的定位盒子会压住之前定位的盒子，如果需要提高层级，使用 z-index: 20; 没有单位