css: position为relative位置调整使用

父元素为块级元素,子元素inline-block,因为行高而对不整齐调整位置

<div class="box-scan inline">
                            <span>扫描到手机</span>
                            <div class="scan-to-mobile clearfix">
                                <span class="top-arrow">
                                    <span></span>
                                </span>
                                <div class="scan-to-mobile-desc fl">
                                    <p class="title">扫描到手机 新闻随时看</p>
                                    <p>
                                        <span class="desc">扫一扫,用手机看文本<br>更加方便分享给朋友</span>
                                        <i></i>
                                    </p>
                                </div>
                                <div class="scan-to-mobile-qrcode fr">
                                    <img src="../images/consult_qrcode.png" alt="" width="118px" height="118px">
                                </div>
                            </div>
                        </div>

css:

.box-scan {
    position: relative;
    cursor: pointer;
}

.box-scan .scan-to-mobile {
    display: none;
    position: absolute;
    top: 30px;
    right: 0;
    width: 400px;
    border: 1px solid #ddd;
    border-radius: 2px;
    padding: 20px;
    background-color: #fff;
}

.box-scan .scan-to-mobile .top-arrow {
    position: absolute;
    right: 26px;
    top: -16px;
    border-style: solid;
    border-color: transparent transparent #ddd transparent;
    border-width: 8px;
}

.box-scan .scan-to-mobile .top-arrow span {
    position: absolute;
    left: -8px;
    top: -7px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
    border-width: 8px;
}

.box-scan .scan-to-mobile .scan-to-mobile-desc .title {
    font: 18px/30px 'Microsoft Yaahei';
    color: #ff9900;
    margin-bottom: 20px;
    text-align: left;
}
.box-scan .scan-to-mobile .scan-to-mobile-desc .desc {
    display: inline-block;
    line-height: 24px;
    text-align: left;
}
.box-scan .scan-to-mobile .scan-to-mobile-desc i {
    position: relative;
    top: 5px;
    display: inline-block;
    width: 63px;
    height: 43px;
    background: url("../images/computer_mobile_icon.png");
}
.box-scan .scan-to-mobile .scan-to-mobile-qrcode {
    width: 118px;
    height: 118px;
    overflow: hidden;
}
原文地址:https://www.cnblogs.com/Nyan-Workflow-FC/p/13175794.html