关于定位
2017-05-22 本文已影响0人
butterflyq
因为 BFC 的高度计算包含浮动元素，同时清除浮动元素也会让父元素撑开，所以可以实现父元素被子元素撑开的需求。
但是 position:absolute 或者 position:fixed 就不一样，它是脱离文档流的，而且不会计算被父元素计算在内，同时也没有办法像浮动一样被清除。
.son1 {
float: left;
margin-top: 50%;
margin-left: 50%;
transform: translate(-50%, -50%);
}
.son2 {
width: 30px;
height: 30px;
float: left;
/* margin-left: 48%;*/
z-index: 20;
background-color: #ffde00;
border-radius: 50%;
background-size: 90% 90%;
background-position: center;
background-repeat: no-repeat;
background-size: 45% 45%;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAsAQMAAADLiKN8AAAABlBMVEX///////9VfPVsAAAAAXRSTlMAQObYZgAAAJhJREFUGBkFwbF14CAABTDxXFCyQbxGOjYLHs2jMAIlBed/kh+UqeNa+kvd+qRtfXIvfdGXezOmdsjr+pQ8SlyhRP2Qpx2MeW/01RfuPSbazov6Lw9qAiUfyAHZYCwwFsiGkgNXDtR80BK4dx70lRdjjom8fVHytM0V9VA/9dCO6+PeSuiLvMZkTHnpUx76FNzTH+r0i+v5D+wNX8mIpFQYAAAAAElFTkSuQmCC');
}
son2元素没有紧挨着son1元素，因为transform的影响，去掉transform之后，可以紧挨着son1
