关于绝对·定位的运用

来源:13-9 Relative与Absolute组合使用

慕田峪9304305

2018-04-20 21:42

<!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下面去



写回答 关注

1回答

  • 慕粉9365829
    2018-04-20 22:34:48

    因为你在#result加入了

        position:absolute;


    慕田峪930...

    加了absolute为什么这样

    2018-04-21 08:15:20

    共 1 条回复 >

初识HTML(5)+CSS(3)-升级版

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

1225308 学习 · 18230 问题

查看课程

相似问题