css定位

一个下拉菜单源

                <div class="dropdown-menu" id="dropdown-menu">
                    <a class="button-green">查找好友</a>
                    <a class="button-green">查找群组</a>
                    <a class="button-green">创建群组</a>
                    <a class="button-red">退出帐号</a>
                </div>
                 <div class="dropdown-menu" id="dropdown-menu" style="position:fixed;left:0;">
                    <a class="button-green">查找好友</a>
                    <a class="button-green">查找群组</a>
                    <a class="button-green">创建群组</a>
                    <a class="button-red">退出帐号</a>
                </div>
                 <div class="dropdown-menu" id="dropdown-menu" style="position:relative;left:200px;float:none;">
                    <a class="button-green">查找好友</a>
                    <a class="button-green">查找群组</a>
                    <a class="button-green">创建群组</a>
                    <a class="button-red">退出帐号</a>
                </div>

html

.dropdown-menu {
    display: none;
    background:#e6e6e6;
    box-shadow:0 0 16px 0 rgba(0,0,0,0.18), 0 16px 16px 0 rgba(0,0,0,0.24);
    border-radius:8px;
    width:160px;
    height:198px;
    position: absolute;
    padding-left:16px;
    padding-top: 10px;
    z-index: 9999;
    margin-top:0;
    left: auto;
    right: 0;
    top: 0;
    float:right;
}
.dropdown::hover .dropdown-menu,
.dropdown::backdrop .dropdown-menu {
    display: block;
}

/*
z-index 属性指定一个元素的堆叠顺序。
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注意： z-index 进行定位元素(position:absolute, position:relative, or position:fixed)。
*/
.button-green {
    background:#19bb9b;
}
.button-red {
    background:#d43044;
}
.button-green,
.button-red {
    display: block;
    position: relative;
    z-index: inherit;
    border-radius:9px;
    background-position: center;
    width:133px;
    height:35px;
    margin-top: 8px;
    padding: 7px;
    background-repeat: repeat-x;
    font-size:14px;
    color:#ffffff;
    text-align: center;
}

css

左边为fixed 中间为relative 右边为absolute(top:100px)

这里用的是box-sizing: border-box;

大长方形用的是绝对定位position: absolute;，所以不会和挤掉其它控件，只会覆盖或被覆盖，然后内部用得是相对定位，前面的控件会将后面的控件挤到底下

大长方形内部的排版是一个padding-left:16px;padding-top:10px;将所有控件右移和下移，然后button那里margin-top: 8px;设置button间的间隔，然后第一个button就能离顶部18px了

然后文字居中用了text-align: center;，能使文字左右居中，再配合padding: 7px;将文字上下居中

总结：

position:absolute;用于实现样式层叠，使用z-index来决定那个出现在更上层

position:realative;用于实现相对排版，即前面的标签会将后面的标签往右或往下挤，方向取决于标签的display是inline还是block或其它

　position:fixed;生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。即滚动scroll后控件还是在原位

position:static;默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

所以分配<div>时根据要不要受其它控件影响，确定要不要用relative，如果不要受其它控件影响，则再根据要不要受scroll影响确定用fixed还是absolute，然后子控件就在这个<div>长方形里的继续这样分配位置