• 0
  • 0

绝对布局下相对于父容器定位样式

2021-03-23 693 0 admin 所属分类:CSS

有 div1 relative 布局

div1 下有 div2 absolute 


现在div2 需要相对于父容器设置对齐位置

//  左上
.pos0{
    top: 5%!important;
    left: 5%!important;
}
//  左下
.pos1{
    bottom: 5%!important;
    left: 5%!important;
}
//  右上
.pos2{
    top: 5%!important;
    right: 5%!important;
}
//  右下
.pos3{
    bottom: 5%!important;
    right: 5%!important;
}
//  左中
.pos4{
    top: 50%;
    left:5%;
    transform: translate(0%,-50%);/*50%为自身尺寸的一半*/
}
// 右中
.pos5{
    top: 50%;
    right:5%;
    transform: translate(0%,-50%);/*50%为自身尺寸的一半*/
}
// 居中
.pos6{
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);/*50%为自身尺寸的一半*/
}
// 顶中
.pos7{
    top: 5%;
    left:50%;
    transform: translate(-50%,0%);/*50%为自身尺寸的一半*/
}
// 底中
.pos8{
    bottom: 5%;
    left:50%;
    transform: translate(-50%,0%);/*50%为自身尺寸的一半*/
}

居中实现需要用到 transform 属性  

返回顶部