CSS学习之定位

CSS相对定位

       设置为相对定位(relative)的元素会偏移某个距离，元素仍保持其未定位前的形状，他本来所占的空间仍然保留

      相对定位是一个很是容易掌握的概念，若是对一个元素进行相对定位，它将出如今它所在的位置上 ，而后能够经过设置垂直或者水平位置让这个元素相对于它的起点进行移动。若是将top 设置为20px， 那么框的位置就在顶部下方20px的地方，若是 left 设置为 30 像素，那么会在元素左边建立 30 像素的空间，也就是将元素向右移动。

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

注意，在使用相对定位时，不管是否进行移动，元素仍然占据原来的空间。所以，移动元素会致使它覆盖其它框。

---

CSS绝对定位

      设置为绝对定位的元素框从文档中彻底删除，并相对于其包含块定位。包含块多是文档中另外一个元素或者初始包含块，元素原先在正常文档流中所占的空间会关闭，就好像元素原来的位置不存在同样，元素定位后生成一个块级框而不论原来他在正常流中生成何种类型的框。

      绝对定位使元素的位置与文档流无关，所以不占据空间，这一点与相对定位不一样，相对定位实际上被看做普通流定位模型的一部分，由于元素的位置相对于它在普通流中的位置。普通流中其它元素的布局就像绝对定位的元素不存在同样：

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

总结：

在CSS中一共有N种定位方式，其中，static ,relative,absolute三种方式是最基本最经常使用的三种定位方式。他们的基
本介绍以下。
　　static默认定位方式
　　relative相对定位，相对于原来的位置，可是原来的位置仍然保留
　　absolute定位，相对于最近的非标准刘定位，原来的位置消失，被后边的位置所顶替

        一般状况下，咱们元素的position属性的值默认为static 就是没有定位，元素出如今正常的文档流中，这个时候你给这个元素设置的left,right,bottom,top这些偏移属性都是没有效果的，不会生效，好比你设置一个距离左边距偏移100px的声明：left:100px 那么这条声明不会起到任何效果，还有z-index属性在这时也不会生效，也就是说咱们平时若是不给某元素一个position属性的声明，那么它默认的就是我上述的这种状况，不过由于有了浮动，因此一般状况下咱们还真不须要给元素设置position属性
        可是某些特殊的状况下，咱们不得不用到position属性，那咱们今天就讲讲position属性的relative和absolute值
首先说relative ，相对定位。
怎么理解呢？若是说我对某元素设置了相对定位，那么首先这个元素他会跟其它的元素同样，出如今文档流中它该出现的位置，而后，咱们能够设置它的水平或垂直偏移量，让这个元素相对于它在文档流中的位置的起始点进行移动。有一点要注意， 在使用相对定位时，就算元素被偏移了，可是他仍然占据着它没偏移前的空间。这里值得注意的一点是：偏移可不是边距，跟边距是不同的。

 咱们先看看下图：

上图中有三个浮动的块，第二个块是设置了相对定位position:relative了的，这时你们看到它的位置并无其它什么不一样，跟其它两个块同样都处在正常的文档流中。
接下来我给那个设置了position:relative的块设置一个偏移：left:50px ; top:30px 这时咱们再看看效果：

        这时咱们发现第二个块针对它自己位置的起始点进行了一个偏移，可是它原来所占据的那个位置空间依然还在(虚线框标示的地方)，即便咱们把偏移量设置得再大一点，使它彻底离开原来的位置，它原来位于文档流中的位置仍然会存在，不会被第三个块浮动过来填补掉。同时，它的偏移也不会把别的块从文档流中原来的位置挤开，若是有重叠的地方它会重叠在其它文档流元素之上，而不是把它们挤开，就像图中那样，它已经覆盖在了第三个块之上。
咱们能够设置它的z-index属性来调整它的堆叠顺序。

接下来咱们来看看绝对定位：position:absolute

        被设置了绝对定位的元素，在文档流中是不占据空间的，若是某元素设置了绝对定位，那么它在文档流中的位置会被删除，那这个元素到哪去了呢？它浮了起来，其实设置了相对定位relative时也会让该 元素浮起来，但它们的不一样点在于，相对对定位不会删除它自己在文档流中占据的那块空间，而绝对定位则会删除掉该元素在文档流中的位置，彻底从文档流中抽了出来，咱们能够经过z-index来设置它们的堆叠顺序 。
        那么绝对定位是如何定位的呢？首先，若是它的父元素设置了除static以外的定位，好比position:relative,或者position:absolute以及position:fixed，那么它就会相对于它的父元素来定位，位置经过left , top ,right ,bottom属性来规定，若是它的父元素没有设置定位，那么就得看它父元素的父元素是否有设置定位 ，若是仍是没有就继续向更高层的祖先元素类推，总之它的定位就是相对于设置了除static定位以外的定位（好比position:relative）的第一个祖先元素，若是全部的祖先元素都没有以上三种定位中的其中一种定位，那么它就会相对于文档body来定位（并不是窗口,相对于窗口定位的是fixed），绝对定位的元素相对于谁来定位，咱们就把这个"谁"叫着参照物，咱们结合上面的讲解来看看下图就明白了 ：

咱们看一下在浏览器里的效果，咱们先看看没有使用绝对定位时的样子：

而后咱们给第二个块设置绝对定位：position:absolute 而后再设置一个偏移：left:150px;top:40px; 这时就变成了下图所示：

还有一点就是：在设置偏移量的时候，咱们能够设置负值。

 

转自：https://www.cnblogs.com/huanying2000/p/6187614.html