css定位

2021-03-01 14:27

阅读:367

标签:移动   back   固定   选择   位置   关系   并且   dex   ati   

  1.定位可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子。

  2.定位则是可以让盒子自由的在某个盒子内移动位置或固定屏幕中的某个位置,并且可以压住其他盒子。

  3.定位的组成:将盒子定在某一个位置    ‘

    1.定位模式(position):用于知道一个元素在文档中的定位方式。

    2.边偏移:则决定了该元素的最终位置。

  4.position  

    static静态定位   relative相对定位  absolute绝对定位  fixed固定定位

  5.边偏移 top  bottom  left  right   :相对于其父元素四条边线的位置    

  6.静态定位:

    选择器 { position : static}        //无定位 很少用  

  8.相对定位:元素在移动过程中,元素相对于其原来的位置。(不脱标,继续保留原来的位置)

  9.绝对定位:在移动位置时,是相对于他的祖先元素来说的。(脱标,不占有原来的位置)

      9.1如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位

      9.2如果祖先元素有定位(相对、绝对、固定定位),则以最近一级的有定位祖先元素为参考点移动位置

  10.子绝父相:子集是绝对定位的话,父集则用相对定位,这样子盒子将在父盒子上面显示。 

  11.固定定位:固定与浏览器的可视区域。页面滚动时元素的位置不会改变

    特点:以浏览器的可视窗口为参照点移动元素  跟父元素没有任何关系  不随滚动条滚动  脱标的(特殊的绝对定位)

  12.粘性定位:被认为是相对定位与固定定位的混合(不常用)

    特点:以浏览器的可视窗口为参照点移动元素(固定定位特点)  粘性定位占有原先的位置(相对定位特点)

     选择器 {position :sticky ;top:10px}   必须添加top、bottom、left、right中的一个才可以显示

 

  13.定位叠放次序:

 选择器 {z-index:1;}  数值可以是正整数、负整数、0、默认为auto,数值越大,盒子越靠上  

 

css定位

标签:移动   back   固定   选择   位置   关系   并且   dex   ati   

原文地址:https://www.cnblogs.com/zyq982796687/p/14410174.html


评论


亲,登录后才可以留言!