position：relative
span
position:absolute//span相对于input的绝对定位
left:(input长度)
top:0
1、打开Hbuilder编辑器，新建一个html空白文档，输入基本的结构，这里设置一个外围的div盒子，给外围的div高度宽度和背景颜色，文字包裹到span标签里，文字也设置一下颜色，按下Crtl+S保存一下：
2、此时可以在软件右侧的窗口可以看到效果：
3、把外围盒子的position属性设置为relative，span标签里的position属性设置为absolute，设置top、left、right、bottom的数值，此时在右侧的窗口就会发现文字的位置已经改变了：
1：定位的几个值1.1，生成绝对定位的元素，相对于浏览器窗口进行定位。----->position：fixed
1.2.生成相对定位的元素，相对于其正常位置进行定位。------>position:relative
1.3.生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。---->position:absolute
1.4.默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。------>position:static
1.5.规定应该从父元素继承 position 属性的值。------>position:inherit
2：了解以上的几个定位属性值，其中最常用的是fixed 、absolute、relative
3：fixed和absolute会破坏文档流，意思是元素是漂浮上去的。
3.1而fixed通常是弹出层，置顶操作等业务用的
3.2,absolute是依据父级元素有没有position属性而生成的绝对与谁定位的。
3.3，relative不会破坏文档流通常是用在子级元素绝对于（absolute）父级元素 定位，而父级元素相对于（relative）自己定位.
4：如果你的div里面有子元素span。而子元素span想要绝对于父级div元素定位那么请这样写：div{position:relative}
div >span{position:absolutetop:50pxleft:50px}
5：对于以上还有哪里不理解或者讲解不清纯的请指正，提问。
6：望采纳！
