在上一篇中我们讲解了关于CSS定位position中的static,接下来我们讲一讲它的第二个属性relative。
从字面的意思上我们可以得出,relative是相对定位的意思,那么它的作用是什么呢?在了解这个之前我们先要了解什么是可定位的祖先元素。可定位的祖先元素就是它的子元素如果设置了一些定位模型可以根据他进行相对定位,就是以他作为参照物。那么relative的作用就是使元素成为可定位的祖先元素。
relative有四个特点。1、可以使用top right bottom left z-index进行相对定位。2、相对元素不会离开常规流。3、任何元素都可以设置为relative ,他的绝对定位的后代都可以相对于他进行绝对定位,这个在css定位中真的超级好用。4、可以是元素浮动发生偏移,并控制他们的堆叠顺序。
我们再来看看css定位中的第三个 absloute,同样从字面的意思中我们可以知道,他的含义是绝对定位。那么他有什么作用呢?
绝对定位-absloute:他的作用是使元素脱离常规流。相比之下他有6个特点。1、使元素脱离常规流。2、设置尺寸时要注意:百分比是相对与谁的比?它是相对于最近定位的祖先元素。3、left right top bottom如果设置为0 那么它将对齐到最近定位的祖先元素的各边 常用来居中。4、 left right top bottom如果设置为auto 那么他将被打回原形,不做任何改变。5、如果没有最近定位的祖先元素 那么会自动默认<body>为默认的祖先元素。6、z-index可以控制堆叠顺序。