css之position定位

時間 2019-12-05

標籤 css position 定位欄目 CSS 简体版

原文原文鏈接

一.定位方式

1.position:static;默認定位方式
2.position:relateve;相對定位,相對於該元素靜態定位的元素定位(即元素所在正常文檔流的位置)
eg:html

<!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>

結果:

相對定位並無脫離文檔流,只是相對於該元素之前所在的位置進行偏移segmentfault

3.position:absolute(絕對定位),相對於除了static定位之外的父元素進行定位,若是父元素沒有定位,就根據body(即瀏覽器窗口)進行定位,絕對定位的子元素是脫離文檔流的,在原文檔中不佔有空間
eg:把上述例子第二個子div定位方式修改下,它的父級元素(class="container")沒有定位,因此相對於body進行定位瀏覽器

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

結果:
spa

4.position:fixed(固定定位),相對於瀏覽器窗口進行定位,即body
5.position:inherit;繼承父元素的定位方式code

二.文檔流

1.定義:文檔流是在 HTML 中的位置順序決定排布的過程
2.脫離文檔流的三種方式:htm

positon:relative;
positon:fixed;
float浮動

3.以上脫離文檔流會使當前元素造成一個BFC(塊級格式化上下文),對於BFC的理解,請看我以前的總結https://segmentfault.com/a/11...繼承

1. CSS之position定位
2. css定位position
3. CSS Position（定位）
4. css-定位（position）
5. CSS定位(position)
6. css position定位
7. CSS 定位position
8. CSS - position 定位
9. CSS position定位
10. css position（定位）
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• RxJava操作符（十）自定義操作符
• 互聯網組織的未來：剖析GitHub員工的任性之源

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。