以便日后翻看。  Position这个特性定义建立元素布局所用底固化机制。

每当慕课网上看到的张鑫旭大神的视频,做的笔记,以便日后翻看。

  Position这个特性定义建立元素布局所用底恒机制。任何因素还是可拓展一定的,不过绝对要固定一个要素会有一个块级框,不论该因素是呀种;相对固定元素会相对于她于正常文档流中的默认位置偏移。

决定位以及float

   1.决定位与float有一致的表征,都出包裹性,和破坏性。

   2.absolute和relative
    如果非将她们俩在一块儿,absolute越独立越劲。
    relative和absolute是分离之,对立的,绝不是呀兄弟关系!
    独立的absolute可以摆脱overflow的限定,无论是滚动还是隐藏
    <div class=”scroll”>
      <a href=”javascript:;” class=”close”
title=”关闭”></a>
      <img src=”mm1″ />
      <img src=”mm2″ />
     </div>
    当半单图片高度过容器大小时,这里的a标签中是明令禁止未动的。
  3.不论是据之absolute定位
   无依靠之意
    不给relative限制的absolute定位,行为表现上是匪以top/right/bottom/left任何一个性质或动auto作为价值!
    定位的行为表现
    1.退文档流
    2.保障占位
  absolute特性表现
    1.去浮动
    2.职位跟随
  配合margin的精确定位
    1.支撑负值定位
    2.超称赞的兼容性
  4.实例
    1.图形图标绝对定位覆盖
    <a>求课<i class=”icon-hot”></i></a>
.icon-hot{position:absolute;width:28px;height:11px;margin:-6px 0 0
2x;background:url();}
    用margin负值和position实现。

    2.下蛋拉框最佳实践
    <div>
      <ul>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    .ul{position:absolute;width:260px;margin:39px 0 0
-1px;padding-left:0;list-style-type:none;border:1px solid
#ccc;background-color:#fff;box-shadow:0px 1px 2px
#d5d7d8;font-size:12px;}
    3.放在中与边缘对一起一定
      <div>
         <img src=”loading.gif” class=”course-loading”
/>
      </div>
      div{text-align:center;}
      img{position:absolute;margin-left:-26px;}-26凡是图自身宽度之一半
      这里用会居中显得是以, 是只占位符,也是独字符。text-align是对准之空格起作用的。
    4.各种对齐溢出技术
      表单注册之早晚的*可以考虑以position:absoluter实现绝对定位,margin-left:负值
      表单前面的图片可以行使position:absoluter实现
      使用绝对化定位后底浩起不见面于截取,超出后无见面给截取
      总结:无因绝对定位也页面布局和重构提供了越发宽广的选型新思路
    5.退出文档流
      回流与重绘,动画尽量作用唉绝对固定元素上
      两独absolute时候按照后来者居上的规则
z-index潜于误区,误区:绝对定位元素都亟待z-index控制层级,确定显示的垂直位置。
      绝对定位与z-index无依
        1.要是一味发一个决元素定位元素,自然非需z-index自动覆盖日常元素
        2.要个别单绝对元素,控制DOM六的上下相继上需要之挂效果,依然无z-index;
        3.只要多只绝对定位交错,非常少见,z-index:1控制
        4.要是非弹框类的绝对化定位元素z-index>2势必z-index冗余,请优化
        6.绝对准一定的left/right/top/bottom
          这些性都如配合下,双双配对之。如果设置了left:0;top:0;盒子就会在窗口的左上角。
          当父容器有relative/absolute/fixed/sticky是绝对定位会基于父元素来计算。
          当只设置一个特性之时节,它只能在一个趋势上起作用。
          当四个特性同时安装的时,如果非设置宽高,会管容器拉开。设置了宽高后,优先left,top
        7.left/top/right/bottom与width/height
          实现一个全屏自适应的50%黑色半晶莹剔透遮罩层。
          通常是
            .overlay{
                position:absolute;
                width:100%;
                height:100%;
                left:0;
                top:0;
            }
          另外的兑现方案:
            .overlay{
              position:absolute;
              left:0;
              top:0;
              right:0;
              bottom:0;
            }
         没有外宽度,没有惊人。实现富裕高满屏效果
          首先,相互替代性
          很多情下,absolute的翅膀拉伸和width/height是好相互替代的。
          position:absolute;left:0;top:0;width:50%;
          等同于
          position:absolute;left:0;top:0;right:50%;
          注意:爆裂拉伸特性IE7+支持

          差异所在-拉伸更强有力
            实现一个去右侧200如从的全屏自适应的容器层。
            使用拉伸直接:
            position:absolute;left:0;right:200px;
            但是,width只能采用CSS3 calc计算
            position:absolute;left:0;width:calc(100%-200px);
          相互支持性
            1.容器无需固定width/height值,内部因素亦可拉伸;
          实现遮罩层
            2.容器拉伸,内部因素支持百分比width/height值。
              通常状况
元素百分比height使温故知新作用,需要父容器的height值不是auto
              绝对定位拉伸下,即使父级容器的height值是auto,只要容器绝对定位拉伸形成,百分比高度值为是永葆的。
              高度自适应布局:
              .page{
                position:absolute;
                left:0;
                top:0;
                right:0;
                bottom:0;
              }
              .list{
                float:left;
                height:33.3%;
                width:33.3%;
                position:relative;
              }
            当left:0;right:0;width:50%时时,的实在增幅是50%一旦无是100%
        合作性。
        当尺寸限制,拉伸以及margin:auto同时出现的时,就会见生绝对定位元素的断居中效果!
        8.absolute网页总体布局 适合走web的布局策略
          与fixed,relative一样,absolute设计的初衷确实是稳定。
          与fixed,relative不同之是,absolute包含重复多就发还强大的特色。如果仅是使其落实有覆盖与固定,则大材小用了。

        absolute与整体布局
          1.body降,子元素升级
            升级的子div类名.page{position:absolute;left:0;top:0;right:0;bottom:0}
            绝对定位受限于父级,因此
            html,body{height:100%}才能够从作用
          2.列模块-头尾,侧边栏各在其各
            header,footer{position:absolute;left:0;right:0;}
            header{height:48px;top:0;}
            footer{heigth:52px;bottom:0;}

            aside{width:250px;position:absolute;left:0;top:0;bottom:0;}
          3.情区域想象变为body
            .content{
              position:absolute;
              top:48px;
              bottom:52px;
              left:250px;
              overflow:auto;
            }
          此时底脑壳尾部和侧边栏还是fixed效果,不随滚动,避免了走端position:fixed实现的广大题材。

  Position元素一般的话有着五单属性,分别产生:

  1.absolute(生成绝定位的因素,相对于static定位以外的第一独父元素进行固化。元素的职通过top、left、right、bottom进行设置。)

  2.fixed(生成绝定位的因素,与absolute不同,fixed是对立于浏览器窗口进行定点。元素的职位设置方式和absolute相同。)

  3.relative(生成相对固定的素,相对于浏览器的窗口进行定位。因此,”left:20px;”会向元素的左侧位置添加20单像素。)

  4.static(position元素的默认值,没有定点,故此因素会出现在常规的文档流中)

  5.inherit(设定当打父元素继承position属性的价值。)

下面我们本着各种性能列出一些实例代码:

  1.absolute属性

    <html>
      <head>
        <style type=”text/css”>
          h2.pos_abs{
            position:absolute;
            left:100px;
            top:150px
          }
        </style>
      </head>

      <body>
        <h2
class=”pos_abs”>这是含绝对定位的标题</h2>
        <p>通过绝对定位,元素得以停到页面上之别位置。下面的题目距离页面左侧
100px,距离页面顶部 150px。</p>
      </body>

    </html>

  2.relative属性() 

    <html>
      <head>
        <style type=”text/css”>
          h2.pos_left{
            position:relative;
            left:-20px
           }
          h2.pos_right{
            position:relative;
            left:20px
           }
        </style>
      </head>

      <body>
        <h2>这是置身正常职务的题目</h2>
        <h2
class=”pos_left”>这个标题相对于其健康职务为左移动</h2>
        <h2
class=”pos_right”>这个标题相对于该常规职务于右侧走</h2>
        <p>相对固定会依照元素的原始位置对拖欠因素进行移动。</p>
        <p>样式 “left:-20px” 从要素的固有左侧位置减去 20
像素。</p>
        <p>样式 “left:20px” 向元素的原左侧位置增加 20
像素。</p>
      </body>

    </html>

  3.fixed属性   

    <html>
      <head>
        <style type=”text/css”>
          p.one{
             position:fixed;
             left:5px;
             top:5px;
          }
          p.two{
             position:fixed;
             top:30px;
             right:5px;
          }
        </style>
      </head>
      <body>

        <p class=”one”>一些文书。</p>
        <p class=”two”>更多的文书。</p>

      </body>
    </html>

 

  在进行元素定位时,如果个别个元素中发生冲突,可以使用z-index属性为因素设置优先级,z-index可让用于将一个元素放置于任何一个素之后,默认值为0,假而两只元素A和B,A的z-index属性默认为0,而用B的z-index属性设为-1,那么,B元素的先级就低于A元素。

  那么什么是纯属定位、什么而是相对稳定也?

  1.绝定位:元素位置会依据浏览器页面左上比进行一定,并要该因素脱离文档流,并且不占用空间。普通文档流中的元素布局就像断定位的因素不存一样。简而言之,使稳元素脱离文档流和变化模型,独立于其他对象二在,没有占位。

  2.相对固定:如果对一个元素进行相对固化,首先她以应运而生在它所起的职位及,然后经垂直或者水平位置,让这因素“相对于”它的故起点进行运动。相对固定不见面要元素脱离文档流,被安装元素相对于该固有定位进行更进一步稳定,其故占位信息还是是。

相关文章