css之定位 margin | positon

margin是各个div相对的距离(定位)

position是网页中的位置，不规则布局可以用这个

 

position：absolute和position：relative在一片css内不能和float一起使用

 

通常父级定义position:relative子级定义position：absolute，这么用。

看标签：

<div class="divcss5">
    <div class="divcss5-a"></div>
</div>

css：

.divcss5{position:relative} 定义，通常最好再定义宽度和高度
.divcss5-a{position:absolute;left:10px;top:10px} 这里定义了距离父级左侧距离间距为10px，距离父级上边距离为10px

这样就绝对定位了“divcss5-a”在父级“divcss5”盒子内。

举例：

我们设置一个最外层盒子css边框为红色，css width为400px,css height为200px,内部包含了2个盒子，为就用绝对定位这2个盒子，第一个盒子CSS命名为“divcss5-a”,其宽度为100px,背景颜色为黑色，高度为100px,定位距离父级上为10px，距离左为10px;第二个盒子CSS类命名为“divcss5-b”，其宽度和高度分别为50px,css背景颜色为蓝色，距离父级下距离为13px,距离父级右边为15px。

    <style> 
    .divcss5{ position:relative;width:400px;height:200px; 
    border:1px solid #000} 
    /* 定义父级position:relative 为就认为是绝对定位声明吧 */ 
    .divcss5-a{ position:absolute;width:100px;height:100px; 
    left:10px;top:10px;background:#000} 
    /* 使用绝对定位position:absolute样式 并且使用left top进行定位位置 */ 
    .divcss5-b{ position:absolute;width:50px;height:50px; 
    right:15px;bottom:13px;background:#00F} 
    /* 使用绝对定位position:absolute样式 并且使用right bottom进行定位位置 */ 
    </style> 

效果：