定位

我们这里要说的定位,不是公司定位,不是网站设计风格定位,更不是什么大明星人设定位,而是CSS中的定位——position属性。

定位属性可以用来控制元素的位置。

定位position的值有absolute、fixed、relative、static和inherit。他们的含义如下如所示:

(图片来自W3School)

当 position 为 static 或 relative,并且 float 为 none 时会触发常规流。

常规流分为两种情况:

静态定位(static positioning), position 值为 static , 盒的位置是常规流布局里的位置。

相对定位(relative positioning), position 值 为 relative, 盒偏移位置由这些属性定义 top, bottom, left and right 。即使有偏移,仍然保留原有的位置,其它常规流不能占用这个位置。

如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。

例如:

.mybox {

position: relative;

left: 20px;

top: 20px;

}

(图片来自CSS Mastery)

上例中Box2相对于自身原来的起点发生偏移,但是原来的位置虽然空出来了却依然保留。

对于绝对定位方案, 盒从常规流中被移除,不影响常规流的布局。 它的定位相对于它的包含块,相关CSS属性: top,bottom, left 及 right 。

如果元素的属性position为 absolute 或 fixed,它是绝对定位元素。

固定定位元素(fixed positioned element)也是绝对定位元素,它的包含块是视口(viewport)。当页面滚动时它固定在屏幕上,因为视口没有移动。

例如:

nav {

background-color: #666;

height: 40px;

width: 100%;

font-size: 18px;

color: #FFF;

position: fixed;

line-height: 40px;

text-align: center;

}

滚动条滚动时,导航菜单依然在屏幕相应位置。

设置为绝对定位的元素框从常规流中完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。

元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在常规流中生成何种类型的框。

绝对定位使元素的位置与文档流无关,因此不占据空间。绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。

例如:

.mybox {

position: absolute;

left: 20px;

top: 20px;

}

(图片来自CSS Mastery)

上例中设置为绝对定位后,Box2脱离原来的常规流,原来占用的空间不保留,后面Box3便占据此空间。而Box2相对元它的包含块发生偏移。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181022G0B2KN00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券