zoukankan      html  css  js  c++  java
  • CSS3学习笔记(十二、定位:position用于细节调整续)

    8.5固定定位:fixed
    当position属性设置为fixed时,就开启了元素的固定定位。
    固定定位的特点:
    (1)固定定位也是一种绝对定位,所以固定定位的大部分特点和绝对定位一样。

    也会改变元素的性质,提升元素层级等等。

    (2)唯一不同的是,固定定位永远参照于浏览器的视口进行定位。
    固定定位的元素不会随网页滚动条的滚动而滚动。

    移动滚动条固定元素在视口中的位置不变。

    例如:京东页面中不随页面移动的搜索栏。

    8.6粘滞定位:sticky
    当position属性设置为sticky时,就开启了元素的粘滞定位。
    粘滞定位(sticky)推出的比较晚,有些浏览器不支持,一般很少使用。
    粘滞定位和相对定位的特点基本一致。
    粘滞定位和相对定位不同之处在于,粘滞定位可以在元素到达某个位置时将其固定。
    粘滞定位的参照物是浏览器的视口。

    8.7绝对定位元素布局
    1)未开启定位时,水平布局规则(复习)
    未开启定位时,水平布局规则(7个值)为:
    margin-left + border-left+ padding-left + width + padding-right + border-right + margin-right = 包含块的内容区宽度
    未开启定位时,发生过度约束时:
    (1)如果7个值中没有auto,则自动调整margin-right值,以使等式成立。
    (2)如果7个值中有auto,则自动调整auto值,以使等式成立。
    (3)可以设置auto的值:margin、width

    2)开启定位后,水平布局规则
    开启定位后,增加了left和right,水平布局规则(9个值)为:
    left + margin-left + border-left+ padding-left + width + padding-right + border-right + margin-right + right = 包含块的内容区宽度
    开启绝对定位后,发生过度约束时:
    (1)如果9个值中没有auto,则自动调整right值,以使等式成立。

    (2)如果9个值中有auto,则自动调整auto值,以使等式成立。
    (3)可以设置auto的值:margin、width、left、right

    (4)left和right的值默认为auto。所以不设置left和right,且等式不成立时,会优先调整left和right。只有left和right有值时,width和margin的auto才能生效。

    如果想让width和margin的auto声响,需要设置left和right为0。

    3)开启定位后,垂直方向布局
    开启定位后,垂直方向规则(9个值)为:
    top + margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom + bottom = 包含块的内容区高度
    开启绝对定位后,发生过度约束时:
    (1)如果9个值中没有auto,则自动调整bottom值,以使等式成立。

    (2)如果9个值中有auto,则自动调整auto值,以使等式成立。
    (3)可以设置auto的值:margin、width、top、bottom
    (4)top和bottom的值默认为auto。所以不设置top和bottom,且等式不成立时,会优先调整top和bottom。只有top和bottom有值时,height和margin的auto才能生效。

    8.8元素的层级
    1)元素开启定位后,默认情况下,body代码越靠下越优先显示。

    2)对于开启了定位的元素,可以使用z-index属性指定元素的层级。
    z-index属性需要一个整数作为参数,参数值越大层级越高,越优先显示。

    3)元素开启定位后,z-index属性值相同时,body中代码越靠下的元素层级越高,越优先显示。

    4)祖先元素层级再高也不能覆盖后代元素(水涨船高)。

    8.9 练习:京东轮播图

    代码:

  • 相关阅读:
    Ext.Net学习笔记12:Ext.Net GridPanel Filter用法
    Ext.Net学习笔记13:Ext.Net GridPanel Sorter用法
    Ext.Net学习笔记14:Ext.Net GridPanel Grouping用法
    Ext.Net学习笔记11:Ext.Net GridPanel的用法
    Ext.Net学习笔记09:Ext.Net Store的用法
    Ext.Net学习笔记10:Ext.Net ComboBox用法
    Ext.Net学习笔记08:Ext.Net中使用数据
    Ext.Net学习笔记07:Ext.Net DirectMethods用法详解
    Ext.Net学习笔记06:Ext.Net DirectEvents用方补充
    Ext.Net学习笔记04:Ext.Net布局
  • 原文地址:https://www.cnblogs.com/bdzxh/p/15691291.html
Copyright © 2011-2022 走看看