CSS 绝对定位 absolute
   来源:网络收集   评论:0 点击:

CSS绝对定位绝对定位:块元素完全从文档流中删除,并通过精确的定位属性值来确定元素的位置。该元素原来在文档流的位置将消失,元素定位后

CSS绝对定位

绝对定位:块元素完全从文档流中删除,并通过精确的定位属性值来确定元素的位置。该元素原来在文档流的位置将消失,元素定位后生成一个块级元素框。

例子:

#div2{
    position: absolute;
    top: 20px;
    left: 30px;
}

图示如下:

绝对定位图示

请比较和相对定位的不同,绝对定位后,框2原来的位置消失,框1和框3挨在了一起。框2的定位值(top和left取值)为相对其已定位的祖先元素。

绝对定位中top等元素的用法和相对定位一致,请参考相对定位一文说明。

提示

  1. 要是用绝对定位,必须指定 left,right,top,bottom 属性中的至少一个
  2. 使用绝对定位的元素,若无已定位的祖先元素,则其相对位置可能会是浏览器画布(浏览器可显示页面)或HTML元素

本章节内容共分 3 部分:

  1. 1. CSS 相对定位 relative
  2. 2. CSS 绝对定位 absolute
  3. 3. CSS 层叠顺序 z-index 属

值得拥有!精心推荐几款超实用的 CSS 开发工具
纯CSS(无 JavaScript)实现的响应式图像显示
推荐大家使用的CSS书写规范、顺序
CSS3 transition规范的实际使用经验
30个漂亮的HTML5和CSS3下拉菜单


手机页面二维码(扫一扫转给需要的人)

相关热词搜索:CSS 绝对定位 absolute

上一篇:CSS 相对定位 relative
下一篇:CSS 层叠顺序 z-index 属性

分享到: 收藏