CSS中的position定位

作者: 六个周 | 来源:发表于2018-09-25 23:29 被阅读5次
    1.HTML中的三种布局方式
    • 标准流
    • 浮动
    • 定位

    2.HTML中的两大元素
    • 块级元素 divH1~H6tableul li olp
    • 内联元素 spanimgainput

    3.position属性的意义
    • position属性决定了元素将如何定位
    • 通过top、right、bottom、left实现位置
    position中的可选参数
    • static
    • relative----- 相对定位
    • absolute----- 绝对定位、脱离文档流,起作用必须与left、top一起使用(注:相对于窗口定位,设置body高度没有用)

    test(absolute):想象demo所在位置

    <style>
        .par{
          height:2500px; 
          border:1px solid red;
          width:1000px;
          margin-top:100px;
          margin-left:100px;
          background:blue;  
       }
        .demo{
          height:100px;
          width:100px;
          background:red;
          position:absolute;
          right:100px;
          bottom:100px;
      }
    </style>
    <body>
         <div class="par">
            <div class="demo"></div>
        </div>
    <body>
    
    • fixed -----脱离正常标准流、不受制与父元素
    • inherit----继承

    4. z-index:可以设置元素的叠加顺序,但依赖·定位属性·
    • z-index大的元素会覆盖z-index小的元素
    • z-index为auto的元素不参与层级比较
    • z-index为负值,元素被普通流中的元素覆盖

    相关文章

      网友评论

        本文标题:CSS中的position定位

        本文链接:https://www.haomeiwen.com/subject/rotroftx.html