Détails relative, absolue, le positionnement fixe de la css

positionnement Sommaire

  1. Emplacement: élément de commande manuelle comprend un bloc emplacement précis

  2. propriétés CSS impliquées: Position

    position属性
        - static(默认值), 静态定位(不定位)
        - relative: 相对定位
        - absolute: 绝对定位
        - fixed: 固定元素
    
  3. Un élément, aussi longtemps que la valeur de position de pas statique, alors que l'élément est un élément de positionnement, les éléments de positionnement sont au départ de l'écoulement de documents (sauf pour le positionnement relatif)

    (1) 文档流中的元素摆放时,会忽略脱离了文档流的元素(跟浮动一样,想象成在天上)
    (2) 文档流中的元素计算自动高度时,会忽略脱离了文档流的元素      //(1)和(2)为脱离文档流元素特点)
    

positionnement relatif

  1. Caractéristiques: ne pas l'élément principal du flux de documents, ne fera que rendre les éléments de changement dans la position d'origine (par rapport à leur position)

  2. Sa position peut être fournie par quatre propriétés CSS, offset boîte pas d'impact sur d'autres cassettes

      - left       //一般以它位主
      - right
      - top        //一般以它位主
      - bottom
    
      例 .box{
    	    position:relative;
    	    top:100px;
            left:150px;
         } 
    

positionnement absolu

  1. Caractéristiques: largeur et la hauteur de l'auto, le contenu adapter

  2. éléments positionnement relativement: un bloc contenant le changement depuis le début de trouver l'élément ancêtre parent positionner le premier élément, l'élément est cartouche remplie (cassette de rembourrage [Cassette contient le contenu]) pour un bloc comportant, si non, il est une séquence comprenant la totalité de la page html (bloc comprenant l'initialisation)

positionnement fixe

  1. Comparer le positionnement absolu: le positionnement absolu et par ailleurs identique, sauf que l'autre bloc comprenant: une fenêtre fixe (fenêtre de navigateur visible)

  2. En vertu de la position centrale (à partir du flux de documents):

    (1)某个方向居中
           1.定宽(高)
           2.将左右(上下)距离设置为0
           3.将左右(上下)的margin设置为auto;
    
          注:绝对定位和固定定位中,margin为auto时,会自动吸收剩余空间
    
          例:left:0;
                right:0;
                top:0;
                bottom:0;
                margin:auto;    (水平垂直都居中)              //因为子盒的左边要贴左边,右边要贴右边,只能靠margin各吸收一半
    
    (2)在水平方向只定了left的值为0,margin为自动不会居中,剩余内容被right吸收了,不会给margin,
        区别于常规流,要考虑left,right
    

Le positionnement d'une pluralité d'éléments se chevauchant (ci-après, sera chapitre de conversation de pile dédié)

  1. Set z-index, normalement, plus la valeur, plus l'utilisateur

  2. z-index peut être négative, si elle est négative, la routine flux rencontré, les éléments flottants, qui seront couvertes par les éléments de positionnement disposé // efficace que z-index

supplément
  • Le positionnement absolu, blocs de positionnement fixes doivent cartouche

  • Le positionnement absolu, le positionnement fixe ne doit pas flotter (élément flotteur ainsi que le positionnement, le flotteur sera forcé de devenir rien, non flottant)

  • Aucune marge de fusion (comme avec l'élément flottant, à partir du flux régulier n'existe pas)

Publié 20 articles originaux · louange gagné 1 · vues 58

Je suppose que tu aimes

Origine blog.csdn.net/weixin_43388615/article/details/105081038
conseillé
Classement