<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>相对参照元素进行定位</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
ul,li{
list-style:none;
}
.course-sidebar-search{
margin:50px;
}
a{
text-decoration:none;
}
#result{
background-color:#ccccff;
width:270px;
margin:39px 0 0 -1px;
position:absolute;
}
</style>
</head>
<body>
<div class="course-sidebar-search">
<ul id="result" class="course-sidebar-result">
<li><a href="http://www.imooc.com/view/121">分享：css深入理解知float浮动</a></li>
<li><a href="http://www.imooc.com/view/118">案例：css圆角进化论</a></li>
<li><a herf="http://www.imooc.com/view/93">案例：css sprite图应用</a></li>
<li><a herf="http://www.imppc.com/view/77">案例：css3D特效</a></li>
<li><a herf="http://www.imooc.com/view/57">案例：如何用css进行网页布局</a></li>
</ul>
<input class="course-search-input" placeholder="课程">
<a href="javascript:" calss="course-search-bth">搜索</a>
</div>
</body>
</html>
为什么我给result加一个绝对定位，整个ul会跑到input下面去
因为你在#result加入了
position:absolute;