您现在的位置是：网站首页 > 心得笔记

css中positoin讲解

盛悦2019-03-05共582人围观
简介前段时间有朋友问我关于position的一些问题，刚好 我在这里可以系统的为自己梳理一下，也希望能帮助到需要的人

html中常用的布局方式：

1、标准流（也就是网页中默认的布局方式 即顺序布局 ）


html两大元素：

  • 块级元素：div h1-h6 有序无序列表（ul ol li） table表格 p段落....

  • 内联元素:a超链接 span文字 img图片 input控件......


两者区别：

    区别：  块元素总是独占一行 

                内联元素是和相邻的内联元素在同一行 如果一行宽度不够时，才会挤到另一行


代码实例显示：

<html>
    <head>
        <meta charset="UTF-8" />
        <title>标准流</title>
        <style>
            .test{
                width:100px;
                height:100px;
                background:red;
                border:1px solid #FFF;
            }
        </style>
    </head>
    <body>
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
        
        <span>文字文字1</span>
        <span>文字文字2</span>
        <span>文字文字3</span> 
    </body>
</html>


运行效果：

32.png


2、定位 position


position属性的意义：
    position属性决定了元素将如何定位 并且可以通过改变 top bottom left right等属性实现位置的改变


position中的可选参数：

  • static

    • static:position属性的默认值 元素按照标准流的方式正常排列


  • relative

    • relative:相对定位 使用后仍然处于正常的文档流中 但是可以通过top bottom left right来改变元素的位置

    • 示例：

    • <html>
    <head>
        <meta charset="UTF-8" />
        <title>标准流</title>
        <style>
            .div1{
                width:100px;
                height:100px;
                background:red;
                position:relative;
                left:0;
                top:0;
               }
            .div2{
                width:100px;
                height:100px;
                background:blue;
                position:relative;
                left:0;
                top:-50px;
               }
        </style>
        <body>
            <div class="div1"></div>
            <div class="div2"></div>
        </body>
 </html>


    运行效果如下：

    33.png

    可发现，后写的带有定位属性的元素层级会覆盖先写的元素！！！


    总结：
    relative通过top bottom left right控制元素的移动，这些元素是如何控制的呢？
    top:50px/-50px -------向下移动50px/向上移动50px
    bottom:50px/-50px ----向上移动50px/向下移动50px
    left:50px/-50px ------向右移动50px/向左移动50px
    right:50px/-50px -----向左移动50px/向右移动50px


  • absolute

    • absolute：绝对定位  配合top bottom left right等位置属性  元素将会脱离正常的文档流 在整个网页中都是可以移动定位的 并拥有了层级的概念 后写的元素将覆盖先写的元素

    • 示例：

    • <html>
    <head>
        <meta charset="UTF-8" />
        <title>标准流</title>
        <style>
            *{
                padding:0;
                margin:0;
                
            }
            .test{
                width:100px;
                height:100px;
                background:red;
               }
        </style>
        <body>
            <div class="test"></div>
        </body>
 </html>

      运行效果如下：

      34.png

      可发现，此时的网页高度就是块级的高度100px ！！！

    • 修改上面代码：

    • <style>
  *{
          margin:0;
        padding:0;
  }
  .test{
          width:100px;
        height:100px;
        background:red;
        position:absolute;
  }
</style>
<div class="test"></div>


      运行效果：

      35.png

      可发现，此刻网页高度是0 因为给div设置了定位属性  导致div已经脱离正常的文档流 以至于html中已经不存在这个div 从而导致html没有高度！！！

    • 给test div添加一个兄弟div

    • <style>
  *{
          margin:0;
        padding:0;
  }
  .bro{
          width:100px;
        height:100px;
        background:blue;
  }
  .test{
          width:100px;
        height:100px;
        background:red;
        position:absolute;
  }
 
</style>
<div class="bro"></div>
<div class="test"></div>

      运行效果：

      36.png

      可发现，此刻虽然设置了定位属性 但是并没有定位特性呢？因为此刻没有设置top bottom left right定位元素！！！

    • 设置定位元素，查看具体变化

    • <style>
  *{
          margin:0;
        padding:0;
  }
  .bro{
          width:100px;
        height:100px;
        background:blue;
  }
  .test{
          width:100px;
        height:100px;
        background:red;
        position:absolute;
        left:50px;
        top:50px;
  }
</style>
<div class="bro"></div>
<div class="test"></div>

      运行效果：

      37.png

      此刻，test div就相对于网页左上角进行了定位 并且此刻红色区块浮动到了蓝色区块上面，这就再次证实了层级的概念，后面元素层级大于前面元素层级！！！

    • 给test div添加一个父级div

    • <style>
  *{
          margin:0;
        padding:0;
  }
  .per{
          width:300px;
        height:300px;
        background:blue;
        margin-top:200px;
        margin-left:200px;
  }
  .test{
          width:100px;
        height:100px;
        background:red;
        position:absolute;
        left:50px;
        top:50px;
  }
</style>
<div class="per">
  <div class="test"></div>
</div>

      运行效果：

      38.png

      可见，由于父级元素中没有设置定位属性 所以子元素将会以窗口的四个角来定位！！！

    • 总结：
      position:absolute;left:100px;top:100px; ---- 相对于网页左上角定位（以网页左上角为原点）
      position:absolute;right:100px;top:100px; ---- 相对于网页右上角定位（以网页右上角为原点）
      position:absolute;left:100px;bottom:100px; ---- 相对于网页左下角定位（以网页左下角为原点）
      position:absolute;right:100px;bottom:100px; ---- 相对于网页右下角定位（以网页右下角为原点）

      注意：这里相对于可视窗口定位的

  • fixed

    • fixed:固定定位 配合top bottom left right的元素属性 元素会脱离正常文档流进行移动定位  并拥有层级的概念

    • 代码示例：

    • <style>
  body{
      height:3000px;
  }
  .test{
          width:100px;
        height:100px;
        background:red;
        position:fixed;
        top:0;
        left:0;
  }
</style>
<div class="test"></div>

      运行效果：

      39.png

      滚动网页，test div仍然固定在网页左上角！！！注意：fixed的定位跟absolute绝对定位一样的定位规则！！！

    • 注意：任何固定元素不受限于父元素 即使父元素带有了定位的属性！！！

    • 代码示例：

    • .per{
          height:300px;
        width:300px;
        background:blue;
        position:absolute;
        top:300px;
        left:300px;
  }
  .test{
          width:100px;
        height:100px;
        background:red;
        position:fixed;
        top:100px;
        left:100px;
  }
</style>
<div class="per">
  <div class="test"></div>
</div>

      运行效果：

      40.png

  • inherit

    • inherit:是继承的意思 

    • 代码实例：

    • <style>
  *{
          margin:0;
        padding:0;
  }
  .per{
          width:300px;
        height:300px;
        background:red;
  }
  .son{
          width:100px;
        height:100px;
        background:blue;
        position:inherit;
        left:100px;
        top:100px;
  }
</style>
<div class="per">
  <div class="son"></div>
</div>

      运行效果：

      41.png

      可见，虽然给子元素设置了position:inherit  但由于父元素中并没有设置任何的定位 所以 子元素继承不了父元素的定位方式！！！

    • 如果我此时给父元素设置position:relative,那么效果展示如下，子元素就有了定位：

      42.png

    • 但是如果设置父元素：position:fixed;left:200px;top:200px;那么展示效果就如下：

      43.png


        分析知道，子元素继承父元素的position：fixed；fixed不受制于父元素！！！


上一篇：实现鼠标移至图片上显示遮罩层 移出遮罩层消失

下一篇：css中z-index层级讲解