day18-CSS-定位流

定位流

定位流分类

1.相对定位position:relative

• 1️⃣不会脱离标准流，会占用标准流的空间
• 2️⃣要结合top left right bottom属性使用，会相对于以前在标准流的位置而移动
• 注意点
• ①相对定位同一个方向上的属性只能使用一个：例如不能同时left和right
• ②相对定位是不脱离标准流的，会继续在标准流中占用一份空间
• ③相对定位区分块级、行内、行内块级元素
• ④相对定位设置margin、padding等熟悉会设置给定位前的元素而不是相对定位后的元素---会影响到标准流的布局
• 应用场景
  • a.微调元素 --- 用得少
  • b.配合绝对定位使用

2.绝对定位position:absolute

• 相对于body来定位
• 注意点
  • 1️⃣绝对定位是脱离标准流---类似于浮动
  • 2️⃣绝对定位是不区分行内、块级、行内块级，都可以设置宽高
  • 3️⃣绝对定位要结合top left right bottom属性使用
• 绝对定位参考点如何选择？
  • 1️⃣默认情况下所有元素（无论是否有祖先元素），都会以body为参考点
  • 2️⃣若绝对定位元素有祖先元素，则参考点就是祖先元素，祖先元素也要是定位流（相对，绝对，固定，除了静态定位）才能变更绝对定位参考点
  • 3️⃣只要是祖先元素都可以更改参考点
  • 4️⃣一个绝对定位元素有祖先元素且祖先元素中有多个定位流，这个绝对定位会选择最近的那个定位流的祖先元素为参考点 -- 就近原则
• 面试注意点
  • 1️⃣若绝对定位元素以body为参考点的话，只会以屏幕未滚动的页面的宽度和高度作为参考点，而不是以整个网页的高度和高度为参考点
  • 2️⃣绝对定位元素会忽略祖先元素的padding
• 应用场景
  • 1️⃣微调元素
  • 2️⃣一般都是绝对定位和相对定位搭配使用（子绝父相）--- 导航条

子绝父相

• 1️⃣只用相对定位时，元素移动前的位置还是会存在，占用标准流的空间----不能单独使用相对定位

• 2️⃣只使用绝对定位，显示的永远是首次出现的宽高，网页宽度和高度变化时会错位----不能单独使用绝对定位

• 诀窍：子绝父相，无论网页宽度高度如何变化都不会变形

• 绝对定位的水平居中

  • margin：0 autuo 在绝对定位中失效
  • 设置高度宽度时可以设置百分比
  • 只需要设置绝对定位元素left：50%然后再设置绝对定位元素的margin-left:-元素宽度的一半

• 练习1：团购界面

    
    
    


    

        ![](images/meat.jpg)
        
        
        
滏山汇海鲜火锅自助餐仅售54.9元！价值79元的周一至周五午餐券，提供免费WiFi。
    

• 练习2：焦点图---广告轮播

    
    
    


    

        ![](images/ad.jpg)
        <
        >
        

            
1
            
2
            
3
            
4
            
5
        
    

3.固定定位

• 1️⃣固定定位是脱离标准流的，不会占用标准流中的空间
• 2️⃣和绝对定位一样，不会区分行内、块级、行内块级元素
• 3️⃣固定定位可以让某个元素不随着滚动条滚动而滚动
  • 注意：背景定位可以让背景图片不随着滚动条而滚动
• 应用场景
  • 1️⃣导航条
  • 2️⃣广告
  • 3️⃣返回顶部--a标签href属性是#就可以返回顶部
• 注意点
  • 1️⃣IE6不支持固定定位

4.静态定位

• 默认情况下，标签就是静态定位

z-index属性

• 默认情况下，所有元素都有一个默认的z-index属性，取值为0
• 作用：专门用于控制定位流元素的覆盖关系
• 关于覆盖关系
  • 1️⃣默认情况定位流元素默认会盖住标准流元素
  • 2️⃣后面编写的定位流元素会盖住前面的定位流元素
  • 3️⃣若定位流元素设置了z-index属性，那么该值越大的，就显示在最上面
  • 注意点
    • ①若两个元素的父元素都没有设置z-index属性，那么谁的z-index属性比较大，谁就显示在上面
    • ②若两个元素的父元素都设置了z-index属性，谁的父元素的z-index比较大，谁就显示在上面
    • ③父元素z-index大的听大的，哪怕子元素z-index比另一个子元素小，那也得听子元素的父元素z-index较大的一个