网页设计定位

HTML代码 admin 158浏览

网页设计定位

语法:

position:static(默认值 没有定位)|relative:相对定位 absolute(绝对定位)|fixed(固定定位)

元素的位置

通过“left”,“top”,“top”,“right”以及“bottom”属性进行规定

相对定位

postion:relative不脱离文档流(乳沟一个元素进行相对定位,首先它将出现在所在的位置上)然后通过设置垂直或者水平位置,让这个元素“相对于”它的原始起点进行移动。

1、仅适用left,right,top,和bottom属性布局相对定位元素

2、仅使用margin属性布局相对定位元素的情况margin-top和margin-bottom负值可改变文档流中所占空间的高度,会影响文档流中的其他元素位置。

3、混合使用left、right、top和bottom与margin属性布局相对定位元素的情况词情况、它们的值会产生累加的效果。

绝对定位absolute

position:absolute脱离文档流偏移位置以最近的定位祖先元素作参照物,如果元素没有已定位的祖先元素,那么它的参照物为顶级元素。

1、仅适用left、right、top、和bottom属性布局绝对定位元素的情况

2、仅适用margin属性布局绝对定位元素的情况

3、混合使用left、right、top和bottom与margin属性布局相对定位元素的情况。

3.1margin属性和top、bottom、left、right属性同时使用,如果同一方向偏移,它们的值会产生累加的效果。

3.2绝对定位和相对定位的累加效果不同,如果top、bottom、left、right属性和margin属性偏移的方向相反top、bottom、left、right属性值有效,反方向的margin属性值无效。混合相对定位和绝对定位绝对定位的元素以最近的定位祖先元素为参照物。

3.2.1、图片+文字

3.2.2、右上角小图标

总结:相对定位的 元素不会脱离文档流,占用文档流的空间,left、right、top和bottom属性与margin属性混合使用会产生累加的效果;绝对定位的元素脱离文档流,偏移不影响文档流中的其它元素,left,right,top和bottom属性与margin属性混合使用,偏移方向相同值累加,方向相反,margin属性值无效;绝对定位的元素以最近的定位祖先元素为参照物。

转载请注明出处:西安SEO|网站排名优化顾问|一名网络技术: » 网页设计定位