请问老师为什么我的放大镜一直不能被包在wrapper里面？

来源：7-4 使用 iconfont 嵌入头部图标

qq_Sakuragi10_0

2019-03-06

export const SearchWrapper = styled.div`
	float: left;
	position: relative;
	.iconfont {
		position: absolute;
		right: 5;
		bottom: 5px;
		width: 30px;
		line-height: 30px;
		border-radius: 15px;
		text-align: center;
		background: green;
	}
`;

export const NavSearch = styled.input.attrs({
	placeholder: 'Search'
})`
	width: 160px;
	height: 38px;
	padding: 0 20px;
	box-sizing: border-box;
	border: none;
	outline: none;
	border-radius: 19px;
	margin-top: 9px;
	margin-left: 20px;
	background: #eee;
	font-size: 14px;
	&::placeholder {
		color: #999;
	}
`;

以上是style.js里的NavSearch和SearchWrapper的内容

然后是index的Nav里的内容

<Nav>
					<NavItem className='left active'>Index</NavItem>
					<NavItem className='left'>Download App</NavItem>
					<NavItem className='right'>Sign in</NavItem>
					<NavItem className='right'>
						<i className="iconfont">&#xe636;</i>
					</NavItem>
					<SearchWrapper>
						<NavSearch></NavSearch>
						<i className="iconfont">&#xe6e4;</i>
					</SearchWrapper>
				</Nav>

结果显示出来是这样：
图片描述请问老师这个是怎么回事呢？谢谢！