CSS定位

时间:2020-07-12
本文章向大家介绍CSS定位,主要包括CSS定位使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

定位详解

定位也是用来布局的,它有两部分组成:定位 = 定位模式 + 边偏移

边移量

简单说, 我们定位的盒子,是通过边偏移来移动位置的。在 CSS 中,通过 topbottomleftright 属性定义元素的边偏移:(方位名词)

边移量属性 示例 描述
top top: 80px; 顶端偏移量,定义元素相对于其父元素上边线的距离
bottom bottom: 80px 底部偏移量,定义元素相对于其父元素下边线的距离
left left: 80px 左侧偏移量,定义元素相对于其父元素左边线的距离
right right: 80px 右侧偏移量,定义元素相对于其父元素右边线的距离

定位的盒子有了边偏移才有价值。 一般情况下,凡是有定位地方必定有边偏移。

定位模式

在 CSS 中,通过 position 属性定义元素的定位模式,语法如下:

选择器 { position: 属性值; }

定位模式是有不同分类的,在不同情况下,我们用到不同的定位模式。

 

语义
static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位

 

$flag 上一页 下一页