day15-CSS之possition的 relative absolute

一、引子

　　在网页中登陆框一般旁边有一个图像，如下图，

二、搞一搞

 我们就来搞这么一个例子，通过background-image

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 
 9     <div style="height: 40px;width: 242px;position: relative">
10         <input type="text" style="height: 40px;width: 200px;
11                 padding-right: 40px">
12             <!--input 加padding ,是为了输入内容不被图片挡住-->
13         <span style="background-image:url(pwd.png);
14                     display: inline-block;
15                     height: 38px;
16                     width: 38px;
17                     position: absolute;
18                     top:4px;
19                     bottom: 1px;
20                     right: 0;
21                     "></span>
22     </div>
23 
24 </body>
25 </html>

PS:  possition  relative absolute 两个需要配合使用， absolute 是相对外面的 relative 调整位置。配合top,botton,right,left

 

posted @ 2018-05-21 11:35  东郭仔  阅读(483)  评论(0)    收藏  举报