css之position定位

2019年9月13日 132次阅读 来源: Delia

一.定位方式

1.position:static;默认定位方式
2.position:relateve;相对定位,相对于该元素静态定位的元素定位(即元素所在正常文档流的位置)
eg:

<!DOCTYPE html>
<html>

  <head>
    <title>position相对定位</title>
  </head>
  <style>
  .container {
    width: 100%;
    height: 200px;
    background: silver;
  }

  div[class^="div"] {
    width: 40px;
    height: 40px;
    background: pink;
    border: 1px solid yellow;
  }

  .div2 {
    position: relative;
    top: 40px;
    left: 40px;
  }

  </style>

  <body>
    <div class="container">
      <div class="div1">1</div>
      <div class="div2">2</div>
      <div class="div3">3</div>
    </div>
  </body>

</html>

结果:
《css之position定位》
相对定位并没有脱离文档流,只是相对于该元素以前所在的位置进行偏移

3.position:absolute(绝对定位),相对于除了static定位以外的父元素进行定位,如果父元素没有定位,就根据body(即浏览器窗口)进行定位,绝对定位的子元素是脱离文档流的,在原文档中不占有空间
eg:把上述例子第二个子div定位方式修改下,它的父级元素(class=”container”)没有定位,所以相对于body进行定位

.div2 {
    position: absolute;
    top: 40px;
    left: 40px;
  }

结果:
《css之position定位》

4.position:fixed(固定定位),相对于浏览器窗口进行定位,即body
5.position:inherit;继承父元素的定位方式

二.文档流

1.定义:文档流是在 HTML 中的位置顺序决定排布的过程
2.脱离文档流的三种方式:

positon:relative;
positon:fixed;
float浮动

3.以上脱离文档流会使当前元素形成一个BFC(块级格式化上下文),对于BFC的理解,请看我之前的总结https://segmentfault.com/a/11…

    原文作者：Delia
    原文地址: https://segmentfault.com/a/1190000017756571
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞