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

Question

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

火诫

0111

发布于
2016-03-21

新手上路，请多包涵

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

html css

阅读 10k

1 个回答

得票最新

PiLee

1.5k1110

发布于
2016-03-28

✓ 已被采纳

<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微调可以实现这样的定位

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

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

你尚未登录，登录后可以

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

如何实现类似豆包的AI改写框跟随内容滚动效果？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

如何在Ant Design表格中同时设置scroll.x和scroll.y且表头不换行？