• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > css中定位中的absolute和relative是什么意思

css中定位中的absolute和relative是什么意思

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含css定位,absolute,relative等相关知识,佚名 希望在学习及工作中可以帮助到您
用Div+CSS进行网站布局时,做一些浮动层等特殊特殊效果时要考虑到定位问题。这就要用到Position属性等。
Position属性有四个值:static、fixed、absolute和relative,

后面两个在布局中的定位里是经常用到的,顾名思义,

absolute是指绝对定位,即将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位,而其层叠通过z-index属性定义。此时对象不具有边距,但仍有补白和边框。

ralative是指相对定位,就是依据left,right,top,bottom等属性在正常文档流中偏移位置。

但是,怎么个绝对法,又怎么个相对法呢?

以前我一直没有仔细去研究它,到具体应用时有时会有点迷糊,我相信很多朋友也会有这样的问题。今天我特意测试了一下,得出了以下结论:

1、当Position属性值为Relative时对象原来占有的位置保留,其后面的对象按原来文档流仍然保持原来的位置Top的值表示对象相对原位置向下偏移的距离bottom的值表示对象相对原位置向上偏移的距离两者同时存在时,只有Top起作用。left的值表示对象相对原位置向右偏移的距离right的值表示对象相对原位置向左偏移的距离两者同时存在时,只有left起作用。

2、当Position属性值为absolute时对象从文档流中抽取出来,原占有的位置被后面的对象顶替上来Top的值表示对象上边框与浏览器窗口顶部的距离bottom的值表示对象下边框与浏览器窗口底部的距离两者同时存在时,只有Top起作用;如果两者都未指定,则其顶端将与原文档流位置一致,即垂直保持位置不变。left的值表示对象左边框与浏览器窗口左边的距离right的值表示对象右边框与浏览器窗口右边的距离两者同时存在时,只有left起作用;如果两者都未指定,则其左边将与原文档流位置一致,即水平保持位置不变。

在Position属性值为absolute的同时,如果有一级父对象(无论是父对象还是祖父对象,或者再高的辈分,一样)的Position属性值为Relative时,则上述的相对浏览器窗口定位将会变成相对父对象定位,这对精确定位是很有帮助的。

您可能想查找下面的文章:

  • CSS定位的几个类型简单介绍
  • css中定位中的absolute和relative是什么意思
  • 借助CSS定位来实现把一个DIV放到另一个div右下角
  • 简明CSS定位属性position
  • CSS 定位之 z-index 问题分析

相关文章

  • 2017-08-06图片与文字同排垂直居中的CSS样式
  • 2017-08-06纯CSS写的选项卡效果
  • 2017-08-06设计适用于打印的CSS样式
  • 2017-08-06css控制水平衡线hr标签样式去掉阴影效果
  • 2017-08-06IE bug input 外层浮动的边距问题
  • 2017-08-06hideFocus(虚线框处理小技巧)
  • 2017-08-06一款纯css3实现的颜色渐变按钮的代码教程
  • 2017-08-06css3教程之倾斜页面
  • 2017-08-06CSS 设定文本尺寸的属性
  • 2017-08-06空格 在ie与在firefox下长度不一样问题

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 浅谈css处理水平居中的问题
    • span设CSS样式总是不起作用的解决方法
    • css让table不显示边框的代码在火狐和谷歌浏览器中无效
    • html div 透明样式示例代码
    • img与容器下边界的空隙(缝隙) 的解决方法
    • div 溢出隐藏 div文字溢出用点(省略号)代替
    • css全屏背景图片设置,django加载图片路径详解
    • CSS的background属性的缩写顺序介绍
    • 纯CSS3实现8组超炫酷鼠标滑过图片动画
    • css实现的漂亮的分页效果代码(橘黄色与蓝色)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有