CSS@布局(中):position

作者 Jackie Anxis 日期 2016-12-31
CSS@布局(中):position

CSS布局(中):position

position 定位方式

position:static 默认定位

默认的定位方式,元素在文档流中,无法用toprightbottomleft进行定位


position:relative 相对定位

  • 仍在文档流中
  • 参照物为元素本身
  • 相对定位元素层级较高

解释:

  • 仍在文档流中:指的是,这个元素仍然会按照原来的位置占据一定的区域,下面的元素不会因此上来,右边的元素不会因此左移,比如这样:

    position: static;
    position: relative;

    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <style type="text/css">
    .grandparent {
    margin: 10px auto 0;
    height: 150px;
    width: 410px;
    font-family: consolas;
    }
    .parent {
    margin: 0 auto;
    height: 150px;
    width: 200px;
    display: inline-block;
    }
    .element {
    width: 200px;
    height: 50px;
    }
    .first {
    background-color: gold;
    }
    .second {
    background-color: lightseagreen;
    color: white;
    line-height: 50px;
    text-align: center;
    }
    .third {
    background-color: pink;
    }
    .relative {
    position: relative;
    left: 10px;
    top: 10px;
    }
    </style>
    </head>
    <body>
    <div class="grandparent">
    <div class="parent">
    <div class="element first"></div>
    <div class="element second">position: static;</div>
    <div class="element third"></div>
    </div>
    <div class="parent">
    <div class="element first"></div>
    <div class="element second relative">position: relative;</div>
    <div class="element third"></div>
    </div>
    </div>
    </div>
    </body>
    </html>
  • 参照物为元素本身:也就是,元素通过top,left等定位偏移属性,其位移的原点,是元素本来的位置。比如上面右边的,其CSS样式是这样的,向右和向下偏移了10px

    .second-child{
    width: 200px;
    height: 50px;
    background-color: lightseagreen;
    position: relative;
    left: 10px;
    top: 10px;
    color:white;
    line-height: 50px;
    text-align: center;
    }
  • 相对定位元素层级较高: 设置了position的元素会比未设置的元素层级要高。可以这么理解,设置了position视作一类,没有设置的视作一类。他们分别计算层级,而前者一定高于后者。

    absolute
    relative
    default

    absolute
    relative
    default

    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <style type="text/css">
    .element{
    display: inline-block;
    width: 200px;
    height: 200px;
    border: 3px solid white;
    background-color: lightseagreen;
    color: white;
    text-align: center;
    line-height: 200px;
    font-family: consolas;
    font-size: 24px;
    }
    .absolute{
    position: absolute;
    background-color: pink;
    }
    .relative{
    position: relative;
    left: 100px;
    top: 100px;
    background-color: lightblue;
    }
    </style>
    </head>
    <body>
    <div style="position: relative; z-index: 10;">
    <div class="element absolute">absolute</div>
    <div class="element relative">relative</div>
    <div class="element default">default</div>
    </div>
    <div style="position: relative; z-index: 1;">
    <div class="element absolute">absolute</div>
    <div class="element relative" style="top: 0;">relative</div>
    <div class="element default">default</div>
    </div>
    </body>
    </html>

你会发现这段代码的效果里:

- 第一行中`relative`的元素覆盖在了它后面的`default`元素上,因为`default`元素没有设置`position`
- 第一行的`relative`元素还覆盖了第二行的`relative`元素,是因为它们父元素的`z-index`值的关系。

position: absolute 绝对定位

  • 脱离文档流(这个元素脱离了文档,浮出文档)
  • 参照物为第一个定位祖先/根元素(也就是html元素)
  • 默认宽度为内容宽度

解释:

  • 脱离文档流:意思就是,这个元素不再占用正常文档流中的空间,且定位方法也和一般元素不一样。比如下图中:abosolute的元素并没有占据文档的位置,而是浮在了上面,因为它脱离了文档流。具体原因会在下面讲到:

    default
    absolute
    default

    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <style type="text/css">
    .parent{
    position: relative;
    margin: 0 auto; /*为了居中*/
    width: 420px;
    }
    .element{
    display: inline-block;
    width: 200px;
    height: 200px;
    border: 3px solid white;
    background-color: lightseagreen;
    color: white;
    text-align: center;
    line-height: 200px;
    font-family: consolas;
    font-size: 24px;
    }
    .absolute{
    position: absolute;
    background-color: pink;
    width:120px;
    height: 80px;
    line-height: 80px;
    }
    </style>
    </head>
    <body>
    <div class="parent">
    <div class="element default">default</div>
    <div class="element absolute">absolute</div>
    <div class="element default">default</div>
    </div>
    </body>
    </html>
  • 参照物为第一个定位祖先/根元素:在相对定位元素中,我们提到,relative元素的参照物是元素本身,而absolute元素的参照物应该是第一个已定位的祖先,如果没有这样的祖先,那么它的参照物就是根元素,也就是<html>。那么什么叫做已定位的祖先呢,就是它的已经设置了position值的祖先元素。

    • 第一点值得注意的是,即便对某个元素设置了absolute,如果没有进行定位,它会保持在原来的位置上。
    • 第二点值得注意的是,默认子元素会被包含在父元素的content-box里面,但是absolute元素定位的原点,是它的第一个已定位的祖先的padding-box左上角。
  • 默认宽度为内容宽度:即便为这个position:absolute的元素设置成block元素,这个元素默认的宽度仍是内容的宽度。

position: fixed 固定定位

  • 脱离文档流(这个元素脱离了文档,浮出文档)
  • 参照物为视窗
  • 默认宽度为内容宽度

  • 参照物为视窗:视窗的意思就是浏览器窗口。不再多做解释。可以自己尝试一下。