使用position: relative、absolute、background-image实现将一个小图标放到登录框的后方 

嵌套div内部div无法生效的解决办法：

1.给父元素div1设置一个padding值

.div1{
height: 500px;
width: 100%;
background: #ccc;
padding-top: 1px;
}



2.给父元素div1设置一个overflow：hidden；在不加overflow:Hidden;的时候，margin-top:这个属性是认不到边的，也就是失效。但是ie浏览器解决了这个问题，火狐、谷歌之类的就会出现失效，所以这是个标准问题，也是个兼容问题。

.div1{
height: 500px;
width: 100%;
background: #ccc;
overflow: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div style="height: 35px;width: 400px;position: relative;">
        <input type="text" style="height: 35px;width: 360px;padding-right: 60px" />
        <span style="position:absolute;right:0;top:10px;background-image: url(堆叠小图标.png);height: 16px;width: 16px;display: inline-block;"></span>
    </div>
</body>
</html>

 

posted @ 2018-04-04 23:14  梦中琴歌  阅读(180)  评论(0)    收藏  举报