开发者社区> 问答> 正文

百度首页输入框里的那个相机图片是怎么添加的

screenshot
这个问题关于定位方面尝试过 但不知道怎么写才行 求各路大神指点

展开
收起
杨冬芳 2016-06-12 10:34:44 7595 0
1 条回答
写回答
取消 提交回答
  • IT从业
    <span class="bg s_ipt_wr quickdelete-wrap soutu_nomac">
        <span class="ipt_photo"></span>
        <input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">
        <a style="top: 0px; right: 0px; display: none;" class="quickdelete" title="清空" id="quickdelete" href="javascript:;"></a>
    </span>

    这是输入框这边的HTML代码,再看看ipt_photo的CSS

    z-index: 1;
    position: absolute;
    right: 11px;
    top: 50%;
    margin-top: -8px;
    height: 16px;
    width: 18px;
    background: #FFF url("https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/soutu/img/soutu_icons_6eead741.png") no-repeat scroll 0px 0px;
    cursor: pointer;

    可以看出这个相机图标是相对于父元素绝对定位的。
    也就是说先设置父元素position:relative;
    再设置相机的类ipt_photo绝对定位position:absolute通过top,right及margin-top微调可以实现这样的定位

    2019-07-17 19:33:23
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
百度研发工具集的应用实践 立即下载
百度外卖从 IDC 到云端服务迁移历程 立即下载
百度外卖从IDC到云端服务迁移历程 立即下载