首页 > 代码库 > css中相对与绝对定位

css中相对与绝对定位

定位在现今的页面当中是比较常见的,比如说一些固定在左右的广告之类的。

而我们在编写代码的时候,系统会默认我们的代码为静态定位

相对定位
  被看作普通流定位模型的一部分,定位元素的位置根据元素本身开始的位置进行移动。使用相对定位的元素不管它是否进行移动,元素仍要占据它原来的位置。移动元素会导致它覆盖其他的框。

代码书写为,在css样式中添加。

 position:relative;
 下面写上要这个元素上下左右移动的像素距离。

绝对定位
  相对于元素的上级或祖先元素进行定位,如果说元素的祖先元素当中,没有定位过的,那么此元素的定位位置就会相对于最初的包含块(body)进行移动。绝对定位的框可以从它的包含块向上、右、下、左移动。

相对定位和绝对定位的框都会让元素脱离普通流,所以都能覆盖页面上的其他元素,这个时候就可以通过设置z-index属性来控制框的堆放次序或者叫优先显示次序。

代码书写为,在css样式中添加。

 position:absolute;
 下面写上要这个元素上下左右移动的像素距离。

css中相对与绝对定位