1.fixed(固定定位)

固定于显示窗口的布局。

在下拉网页时标题和导航栏不会移动,具体代码如下:

html

 

 

css

 

2.absolute(绝对定位)

绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。普通流中其它元素的布局就像绝对定位的元素不存在一样。

绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。

对于定位的主要问题是要记住每种定位的意义。所以,现在让我们复习一下学过的知识吧:相对定位是“相对于”元素在文档中的初始位置,而绝对定位是“相对于”最近的已定位祖先元素,如果不存在已定位的祖先元素,那么“相对于”最初的包含块。

具体代码如下:

html

css

 

3.relative (相对定位)

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

注意,在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。

 

4.sticky(粘性布局):sticky是一个很有意思的布局,平常网站也比较少遇到,在屏幕范围时该元素的位置并不受到定位影响(设置是top、left等属性无效),当该元素的位置将要移出偏移范围时,定位又会变成fixed,根据设置的left、top等属性成fixed(固定布局)的效果.

 

5.static(静止的):static(静止的)是position的默认值,元素处于正常的文档流中,会忽略left、top、right、bottom和z-index属性.这个也可以说是没有布局.

 

posted on 2018-10-25 19:34  会飞的鲤鱼  阅读(150)  评论(0编辑  收藏  举报