[分享]css三种定位的区别

在CSS设计中，布局和排版是十分重要的，而定位就是其中不可或缺的一部分。CSS有三种定位方式，分别是相对定位、绝对定位和固定定位。首先，相对定位使用的是相对于元素自身原本的位置进行定位，即通过top，...

在CSS设计中，布局和排版是十分重要的，而定位就是其中不可或缺的一部分。CSS有三种定位方式，分别是相对定位、绝对定位和固定定位。

首先，相对定位使用的是相对于元素自身原本的位置进行定位，即通过top，bottom，left和right属性来进行微调。相对定位使用的是相对于元素原本的位置进行调整，所以元素在文档流中仍然占有位置，在页面中相对于原本位置的基础上进行微调，通过设置起始点的位置，然后调节距离来达到对位置的调整。下面是相对定位的代码：

.box-relative {
  position: relative;
  top: 50px;
  left: 20px;
} 

接着是绝对定位，绝对定位是将元素"摘"出文档流，利用top，bottom，left，right四个属性相对于父元素进行定位，若没有明确指定父元素，则相对于最外层的body元素定位。绝对定位的元素不会对文档流产生任何影响，也就是说，其他元素不会因为绝对定位的元素而发生位置上变化。下面是绝对定位的代码：

.box-absolute {
  position: absolute;
  top: 100px;
  left: 100px;
} 

最后是固定定位，固定定位类似于绝对定位，同样也会将元素"摘"出文档流，但是固定定位是相对于浏览器窗口进行定位。固定定位的元素总是在同一位置，无论滚动条怎么滚动。下面是固定定位的代码：

.box-fixed {
  position: fixed;
  top: 20px;
  right: 20px;
} 

以上就是三种定位方式的区别，但是需要注意的是，在使用定位时还要考虑到元素的层叠关系（z-index属性），因为在同一位置的元素会按照其z-index值的大小决定覆盖关系。