css的相对定位和绝对定位
css标签的相对定位和绝对定位是通过position属性来控制的,相对定位和绝对定位不改变元素的大小形状,只改变元素的位置。
一、position属性的值有以下几种:
static:默认值,没有定位,元素出现在正常的流中。
absolute:使用绝对定位,相对于static定位以外的最近一个祖先元素进行定位。元素的位置通过left,top,right以及bottom属性进行规定。
relative:使元素相对定位,相对于自己的正常位置进行定位。
fixed:使元素绝对定位,相对于浏览器窗口进行定位。元素的位置通过left,top,right以及bottom属性进行规定。
inherit:规定应该从父元素继承position属性的值。
一个没有使用定位的例子:
显示结果如下:
二、相对定位
相对定位的参考点是标签定位之前的位置,不是相对于父节点、同级节点或浏览器。
相对定位的元素,通过 left、right 属性来定义水平偏移量,top、bottom 属性来定义垂直偏移量。left 表示相对于原本位置的左外边界右移的距离,right 表示相对于原本位置的右外边界左移的距离,top 表示相对于原本位置的上外边界下移的距离,bottom 表示相对于原本位置的下外边界上移的距离。并且,偏移量可以是正值,也可以是负值,负值表示向相反的方向移动。left、right、top、bottom 这 4 个属性的值,可以是长度值(可以是绝对单位或相对单位),也可以是百分比。使用百分比时,水平偏移量根据其父元素 width 属性的值计算得到,垂直偏移量根据其父元素 height 属性的值计算得到。需要注意的是,在设置偏移时,如果父元素没有显式定义 height 属性,就等同于 height 属性的值为 0。
对上例进行修改,对div2使用相对定位:
效果如下:
三、绝对定位:
绝对定位相对于最近的定位的祖先元素进行定位,如果没有祖先元素,他便使用文档主体(body)即浏览器,并随页面滚动一起移动;如果父级有定位则看父级,如果父级没有定位则继续向上找父级。
绝对定位的元素是脱离文档流的,即直接在标准流中删除,所以元素原来的位置会被占用。
对上例进行修改(无父节点):
效果如下:
再如(父节点有定位):
不使用绝对定位时:
效果如下:
使用绝对定位:
效果如下:
css的相对定位和绝对定位相关推荐
- 详解CSS的相对定位和绝对定位
CSS的相对定位和绝对定位 一.Static 静态定位 通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,这个时候你给这个元素设置的left,r ...
- css中相对定位和绝对定位
css中相对定位和绝对定位 定位标签:position 包含属性:relative(相对) absolute(绝对) 1.position:relative; 如果对一个元素进行相对定位,首先它将出现 ...
- html相对定位 不占位置,CSS position 相对定位和绝对定位
一.position 的四个值:static.relative.absolute.fixed. 绝对定位:absolute 和 fixed 统称为绝对定位 相对定位:relative 默认值:stat ...
- CSS中相对定位与绝对定位
绝对定位: absolute, fixed 相对定位: relative 默认值: static <!DOCTYPE html> <html><head><m ...
- html中的相对和绝对定位,实例讲解CSS中相对定位和绝对定位的用法和区别
一.相对定位 相对定位是指,该元素相对自己原来位置,偏移一定距离,元素可以通过顶部top,底部bottom,左侧left和右侧right属性来设置定位.它相对的是它自己. 举例:大div里面包含5个小 ...
- html css x y相对定位坐标,HTML与CSS之相对定位、绝对定位
相对定位 指元素在其正常的位置偏移某些像素即相对于元素本身的原有位置html 我是C1 我是C2 css #C0{ border: 1px solid red; width: 400px; heigh ...
- CSS相对定位和绝对定位的区别
CSS中相对定位和绝对定位常常会使初入的新人感到困惑,我本人也是深受其害!今天详细的给大家说一下相对定位和绝对定位的区别,也是对自己的一种复习. 一.相对定位 position: relative; ...
- html相对定位 不占位置,相对定位与绝对定位的区别 相对定位是以当前位置为基准计算的...
div的相对定位和绝对定位是什么意思,什么区别啊? 有位老兄说学习div+css的div布局必须学会相对定位和绝对定位 小弟初学不相对定位和绝对定位是定位的两种表现形式,区别如下: 一.主体不同 相对 ...
- [css] 说说你对相对定位、绝对定位、固定定位的理解
[css] 说说你对相对定位.绝对定位.固定定位的理解 position 属性指定了元素的定位类型.position 属性的五个值:static(默认值) relative(相对定位) fixed(固 ...
最新文章
- 按键的使用(一)------verilog
- 研究人员通过小鼠控制光标来研究意图控制,探索更好的脑机接口使用方式
- 开发流媒体服务器_Github选出10大开源免费的RTSP流媒体项目
- 麻省理工告诉我们男女配对的真相!
- Server Develop (三) 多进程实现C/S
- SSE事件作用,错误分析
- bind 绑定标签的用法
- python曲线和直线的交点_求直线与分段线性曲线的交点
- creo JAVA,Creo JAVA二次开发全套视频教程
- <<视觉问答>>2021:Found a Reason for me? Weakly-supervised Grounded Visual Question Answering using Capsu
- 创新Sound Blaster Tactic3D Alpha耳机驱动v1.0官方版
- 【Maven】子模块打包失败 pom.xml is not existed
- JavaScript-高级进阶
- dba怎么报考_在职DBA学位获得方式及报考注意事项
- 3_Cortex-M3和M4 架构
- NGINX的奇淫技巧 —— 5. NGINX实现金盾防火墙的功能(防CC)
- java-net-php-python-ssm担保系统项目管理系统计算机毕业设计程序
- Android 离线扫描身份证
- 我们不一样不一样不一样
- 做FPGA的出路在哪里?——同行的感受,我的方向