zoukankan      html  css  js  c++  java
  • 定位position介绍

    定位 (position): 是一种更加高级的布局手段

           -通过定位可以将元素摆放到页面的任意位置。

           使用position属性来设置定位

            可选值: static 默认值 元素是静止的,没有开启定位

                 relative 开启元素的相对定位

                 absolute 开启元素的绝对定位

                 fixed  开启元素的固定定位

                 sticky 开启元素的粘滞定位

    例子: 开启相对定位

        position:relative;

        top:100px; // 向上偏移100像素

        bottom:10px;

        left:10px;

        right:10px;

         相对定位的特点:

              1.如果不设置偏移量,元素不会发生任何变化。

              2.相对定位参照元素在文档中的位置进行定位。

              3.相对定位会提升元素的层级。

              4.相对定位不会使元素脱离文档流。

              5.相对定位不会改变元素性质。

       绝对定位的特点:

              1.如果不设置偏移量,元素的位置不会发生变化。

              2.元素会从文档流中脱离。

              3.绝对定位会改变元素的性质,行内元素变成块元素,块的宽度被内容撑开。

              4.绝对定位会使元素提升一个层级。

              5.绝对定位元素是相对于包含块进行定位的。

                包含块(containing Block)

                  正常情况下:

                        包含块就是离当前元素最近的祖先块元素

                        例如:<div class="box1"> 2222<div class="box2">1111</div></div>   

                               div.box2的包含块就是div.box1

                           <div class="box"><span><em></em></span></div>

                            span元素的包含块 是div.box ; 

                            em元素的包含块  是div.box;

                  绝对定位的包含块

                          离它最近的开启了定位的祖先元素。

                          如果所有的祖先元素都没有开启定位,则相对于根元素(<html>)定位。

        固定定位(fixed):绝大部分跟相对定位相同。

                唯一不同的是参照浏览器视口,不会随滚动条滚动改变。

        粘滞定位(sticky): 兼容性不好

                当元素位置到达某个位置后,不再滚动。

      

  • 相关阅读:
    Arcgis地理处理工具案例教程——批量提取多个栅格的范围边界矢量
    win10 windows10自动修复系统
    ArcGIS案例教程—E00格式批量导入成要素类
    Python正则表达式多行匹配问题
    学习ArcGIS开发的途径有哪些
    Arcgis空间分析案例教程——计算空间分布范围
    ArcGIS地理建模批处理教程——批量添加文件名作为字段值
    ArcGIS地理建模批处理教程——批量去除Z值和M值
    华为NM存储卡与Micro SD存储卡对比分析
    EDT
  • 原文地址:https://www.cnblogs.com/kukai/p/12298409.html
Copyright © 2011-2022 走看看