在CSS中,position属性用于控制元素的定位方式。它包括static、relative、absolute和fixed四种取值。通过position属性,我们可以指定元素相对于其正常位置的偏移量,或者相对于其最近的定位祖先元素的偏移量。这个属性的灵活运用可以让我们在网页布局中实现各种各样的效果。
CSS Position 属性-定位元素
CSS position 属性用来设置 HTML 元素的定位方式。它可以让你在页面中自由的定位元素,可以让元素像“漂浮”着一样,在页面上随意移动及定位,从而实现更加灵活和创造性的布局效果。有时候CSS的定位属性也被称为CSS layout属性。position 属性有四个可选值,分别为 static、relative、absolute 以及 fixed。
默认值 static
默认定位方式为 static。所谓 static,就是默认情况下,元素的布局按照页面顺序排列。
相对定位 relative
相对定位,是以元素原本位置为基础,来进行定位的。若设置了 relative 的值,可以通过 left 或者 right、top 或者 bottom 来进行偏移的设置。通常我们用相对定位来调整某个元素的位置,而不会影响其他元素的位置。
绝对定位 absolute
绝对定位的元素被移动到它所在的父容器或最接近的定位祖先元素中,绝对定位的元素脱离了文档的流,不会影响其他元素的位置和布局。它可以根据上下左右的值来定位元素。若元素的祖先元素并没有设置 relative 或 absolute 的值,那么这个元素默认的祖先元素是 body 元素。如果没有定位就按照页面流动排布,则只需在元素内部添加一个子 div 来作为定位元素即可。
固定定位 fixed
固定定位是 absolute 的一种特殊形式,通常是固定显示在屏幕的某个位置,不会随着页面的滚动而移动。通常我们可以用固定定位来优化网站的页面,如设置网站的导航栏,通常会用到固定定位。在定位时,最常用的属性就是 left 和 top,也可以使用 right 和 bottom 来设定位置。