標准流(Normal Flow)

默認情況下,元素都是按照normal flow(標准流, 常規流, 正常流. 文檔流(document flow))

從左到右,從上到下按順序擺放好
默認情況下,互相之間不存在層疊現象
在標准流中,可以使用margin, padding對元祖進行定位
1. margin還可以設置負數
2. 缺點;
  1. 設置一個元素的margin或者padding,通常會影響到標准流中其他元素定位效果
  2. 不便於實現元素層疊效果

定位position

利用position可以對元素進行定位,常用取值4個:

static: 靜態定位, (默認值),按照標准流進行布局
relative: 相對定位 , 相對自己於標准流中的位置進行定位
absolute: 絕對定位 , 相對於非static的最近父元素進行絕對定位, 沒有找到就是相對於瀏覽器窗口
fixed 固定定位 , 相對於瀏覽器窗口進行固定定位

static: 靜態定位

static,是position的默認值
按照標准流進行布局
設置left,right,top,bottom沒有作用

relative: 相對定位

元素按照mormal flow 布局
可以通過left, right,top,bottom距離大小進行定位
1. 定位參照對象是元素自己原來的位置
距離元素原來的left,right,bottom,top相對定位(相對四堵牆),值還可以負值

<style>
    .box, .box2 {

      display: inline-block;
      width: 100px;
      height: 100px;
      
      line-height: 100px;
      text-align: center;
    }

    .box {
      background-color: rgb(95, 95, 160);

      position: relative;
      /* left: 50px; */
      /* right: 50px; */
      /* bottom: 50px; */
      top: 50px;

    }

    .box2 {
      background-color: olivedrab;
    }
  </style>
</head>
<body>
  <span class="box">元素</span>
  <span class="box2">標准流元素</span>
</body>

水平居中

 /* 水平居中 */
    .box3 img {
      /* 1. 向左移動img的一半 */
      position: relative;
      /* left: -960px; */
      transform: translate(-50%);

      /* 2. 向右移動父元素(.box3)的一半 */
      margin-left: 50%;
    }

fixed: 固定定位

元素脫離標准流
可以通過left, right,top, bottom 進行定位
定位參照物是視口(viewport)

當畫布滾動的時候,元素位置不變

body {
      margin: 0;
      padding: 0;
    }

    .box, .box2 {
      width: 100px;
      height: 100px;

      line-height: 100px;
      text-align: center;
    }

    .box {
      background-color: rgb(95, 95, 160);

      position: fixed;
      /* left: 50px; */
      /* right: 50px; */
      /* bottom: 50px; */
      /* top: 50px; */
    }

    .box2 {

   display: inline-block;

　　background-color: olivedrab;
    }

absolute 絕對定位

元素脫離標准流
可以通過left, right,top, bottom 進行定位
1. 定位參考對象是最相鄰的定位祖先元素
2. 如果找不到這樣的祖先元素,參考對象就是視口
定位元素
1. position值不為static的元素
2. 也就是position值為relative, absolute, fixed的元素
子絕父相
1. 在絕大數情況下,子元素的絕對定位都是相對於父元素進行定位

絕對定位技巧:

絕對定位元素
1. position 值為absolute或者fixed的元素
對於絕對定位元素來說
1. 對於參照對象的寬度 = left + margin-left + right + margin-right + 絕對定位元素的實際占用寬度
2. 對於參照對象的高度 = top+ margin-top+ bottom+ margin-bottom+ 絕對定位元素的實際占用高度
如果你希望絕對定位元素的寬高和參照對象一樣(占滿), 可以設置絕對定位的以下屬性為:　　
1. left: 0; right:0; top:0; bottom: 0; margin:0;

如果你希望絕對定位元素在參照對象中居中(水平垂直居中), 可以設置絕對定位的以下屬性為: (要確定絕對定位元素寬高)

left: 0; right:0; margin:auto;(水平居中)
top:0; bottom: 0; margin:auto; (垂直居中)
left: 0; right:0; top:0; bottom: 0; margin:auto;(水平垂直居中)

<style>
    .box {
      position: relative;
      width: 300px;
      height: 300px;
      background-color: blue;
    }

    .inner {
      position: absolute;
      /* 占滿父元素 */
      /* left: 0;
      right: 0;
      top: 0;
      bottom: 0; */

      /* 居中 */
      width: 100px;
      height: 100px;
       /* 垂直水平居中 */
      /* 水平居中 */
      left: 0;
      right: 0;

      /* 垂直居中 */
      top: 0;
      bottom: 0;
     
      margin: auto;

      background-color: olivedrab;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="inner"></div>
  </div>
</body>

元素之間的層疊關系z-index

z-index 屬性用來設置定位元素的層疊順序
1. 取值可以是正整數,負整數,0
比較關系:
1. 如果是兄弟關系
  1. z-index 越大,層疊越在上面
  2. z-index相等, 寫在后面的那個元素層疊在上面
2. 如果不是兄弟關系
  1. 各自從元素自己以及祖先元素中,找出最相鄰的2個定位元素進行比較
  2. 而且這2個定位元素必須有設置z-index的具體數值

position總結

脫離標准流

可以脫離標准流的元素: postion:fixed/absolute, float
特點:
1. 可以隨意設置寬高
2. 寬高默認由內容決定
3. 不再受標准流的約束
4. 不再給父元素匯報寬高數據
5. 脫離標准流的元素不是inline-block

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 常規流(Normal flow) 設置position:fixed后元素脫離標准流的解決方法 CSS的三種手段讓元素脫離標准本文檔流——浮動、絕對定位、固定定位解疑答惑—解決脫離標准文檔流（惡心的浮動）網站布局之------浮動(float)和定位(position)(絕對定位，相對定位，靜態固定定位)，***什么叫脫離文檔流？ position:absolute會使元素脫離文檔流 position 脫離文檔流導致的問題 position屬性脫離文檔流覆蓋其他內容子元素position:absolute定位之后脫離文檔流，怎么使子元素撐開父元素標准文檔流