css中定位属性及常见属性值

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

CSS中的定位属性,用于控制HTML元素在页面中的位置。常见的定位属性有position、top、bottom、left、right。// position属性 position: static; p

CSS中的定位属性,用于控制HTML元素在页面中的位置。常见的定位属性有position、top、bottom、left、right。

// position属性
position: static;
position: relative;
position: absolute;
position: fixed;

// top/bottom/left/right属性
top: 0;
bottom: 0;
left: 0;
right: 0; 

其中,position属性有四个常见取值:

  • static:默认值,元素不会被定位,按照正常文档流进行排列。
  • relative:相对定位,元素相对于其原本在正常文档流中的位置进行定位。
  • absolute:绝对定位,元素相对于其最近的已定位祖先元素进行定位,若没有已定位祖先元素则相对于body进行定位。
  • fixed:固定定位,元素相对于浏览器窗口进行定位,不会随着页面滚动而移动。

而top、bottom、left、right属性用于设置元素距其定位父元素上下左右的距离,常见取值有:

  • auto:默认值,由浏览器自动计算偏移量。
  • length:可以使用具体长度值来设置偏移量,如"10px"。
  • percentage:可以使用百分比来设置偏移量,如"50%"。

除了上述常见的定位属性值以外,还有一些扩展属性值,如z-index用于设置元素的堆叠顺序,opacity用于设置元素的透明度等。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中定位属性及常见属性值

粉丝

0

关注

0

收藏

0

已有0次打赏