最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
CSS绝对定位固定定位详解
时间:2016-05-14 编辑:简简单单 来源:一聚教程网
绝对定位 的元素基于最近的 position 为 relative/absolute/fixed 祖先元素进行定位。如果没有找到 position 为 relative/absolute/fixed 的元素,则基于是以整个 canvas (渲染内容的空间) 的坐标原点(左上)为基准,以 viewport (也就是浏览器视窗内渲染 HTML 的空间)为大小的矩形进行定位, 并不是基于根元素定位 。
固定定位 的元素基于viewport(浏览器视窗)进行定位。
1. 绝对定位 和 固定定位 的元素若没有设置 top/right/left/bottom 的值。其位置为原来在文档流中的位置。其他文档流元素会占据其原来位置。
要使绝对定位或固定定位的元素水平居中,需要设置其 width 为固定值,并且 left: 0; right: 0; 。
2. 绝对定位 和 固定定位 的元素,若其宽度 width 或高度 height 的单位为 百分比 ,宽度和高度值是相对于其基于定位的元素计算的。(在使用一些stick插件时尤其要注意这点)。
例子
-
上一个: 给博客空间添加CSS3音乐播放器的例子
-
下一个: 纯CSS实现小箭头的案例
相关文章
- css 定位(相对定位与绝对定位) 06-11
- CSS中绝对定位absolute和相对定位relative详解 04-21
- css中position相对定位和绝对定位(relative,absolute)详解 10-30
- css pointer-events绝对定位层遮挡的问题解决办法 08-13
- css div相对定位和div绝对定位详解 12-09
- CSS样式表一席谈之绝对定位与相对定位 01-26