学习历程～CSS高级特性——定位1、position：float让元素“随波逐流”，无法精确定义元素的位置，精确定位元素

一、position

：float让元素“随波逐流”，无法精确定义元素的位置；精确定位元素的位置选择使用position，取值如下:

1、static，静态定位，为默认值，相当于没定位

2、relative，相对定位，文档流中原位置不释放；配合偏移属性来做微调

3、absolute，绝对定位，可让元素脱离默认文档流；一般来讲口诀：父相子绝；如果没给父级元素设置相对定位，直接给子元素设置绝对定位，那么自元素是相对于body定位的，也就是页面

4、fixed，固定定位，可让元素脱离默认文档流；需加入top等偏移属性来定位，偏移属性设置的值指的是距离边的间距，例如设置right为100px，是往左走；设置一组相邻偏移属性即可，原则：就近原则

使用“浮动float”还是“定位position”：通常，大块儿布局使用float，很细的定位才使用定位

二、可实现主导航下拉菜单

需求：所有一级菜单<li>下的二级菜单<ul>都要参照整个主导航栏<ul>左上角绝对定位

1、实现二级菜单

<ul class="nav">
    <li>
        <ul>
            <li>1111</li>
            <li>2222</li>
            <li>3333</li>
            <li>4444</li>
        </ul>
    </li>
        <ul>
            <li>5555</li>
            <li>6666</li>
            <li>7777</li>
            <li>8888</li>
        </ul>
    <li>
    </li>
</ul>

2、对一级ul设置相对定位ul.nav{position:raletive}；对ul.nav下的li下的ul设置绝对定位ul.nav>li>ul{position:absolute;top:54px;left:0px}

ul.nav{position:raletive}
ul.nav>li>ul{position:absolute;top:54px;left:0px}

3、暂时隐藏ul.nav下的li下的ul

ul.nav>li>ul{...display:none}

4、当鼠标悬停在主导航ul.nav下的一级菜单li上时，让当前li下的二级菜单ul显示

ul.nav>li:hover>ul{diapaly:block}