15网页前端CSS——CSS定位属性 与浮动属性

一：定位属性

1：position：定位方式：absolute（绝对定位） fixed（固定）（relative 定位参考，可对内部相对 absolute 定位）

     z-index：层叠顺序，值越大越在上方

     top：检索或设置对象与其最近一个丁诶的父对象顶部相关的位置

     right：检索或设置对象与其最近一个丁诶的父对象右部相关的位置

     bottom：检索或设置对象与其最近一个丁诶的父对象下部相关的位置

     left：检索或设置对象与其最近一个丁诶的父对象左部相关的位置

.ad{
    width: 200px;
    height: 200px;
    border: 1px solid red;
  /*  position: absolute; 绝对定位方式(以父级为标准）
    top:50px;
    left:60px;*/
    position: fixed;/*固定定位:滚动时不会变*/
    top:200px;
    
}
.ae{
    width: 100px;
    height: 50px;
    background-color: green;
   /* position: relative;  相对定位（找到相邻元素）
    top:50px;
    left: 50px;*/
    
}
.ad{
    width: 200px;
    height: 200px;
  
    background: red;
    position: absolute;/*父级元素定位 body*/
    top: 200px;
    left: 400px;
    z-index:14;
}
.ae{
    width: 200px;
    height: 200px;
    background: green;
    position: absolute;/*父级元素定位 div*/
    z-index:-1;/*层叠属性，越高的就在上方*/
}

二：浮动属性

1：float：浮动

     float：left：左浮动

     float：right：右浮动

#ad{
    width: 200px;
    height: 200px;
    background: red;
    float: left;
    
    
}
#ae{
    width: 200px;
    height: 200px;
    background: green;
    float: left;
}
#af{
    width: 200px;
    height: 200px;
    background: blue;
    float: left;
}