1、默认不写position的话，值为static。

2、相对定位：相对于元素自己本身的位置偏移，虽然位置偏移，但元素本身占据的空间并不释放。

3、绝对定位：相对于离它最近的，position不为static的父元素的位置偏移。元素本身占据的空间释放掉。

比如

<body>

<div id="div1" style="position:relative;">

<div id="div2">

<div id="div3" style="position:absolute;">

</div>

</div>

</div>

</body>

说明：上例中，div3的绝对定位就是相对于div1的位置而不是div2的位置。

css 中的相对定位和绝对定位的更多相关文章

  1. css中的相对定位与绝对定位

    之前说过了CSS有三种基本的布局机制:普通流.浮动和绝对定位.除非专门指定,否则所有的框都在普通流中定位.而普通流中元素框的位置由元素在HTML中的位置决定. 相对定位 相对定位实际上被看做普通流定位 ...

  2. 辛星和你彻底搞清CSS中的相对定位和绝对定位

    前面我在解读CSS中也说过了关于相对定位和绝对定位的问题.无奈还是有些童鞋表示迷茫,于是另开一篇博客,来具体解读相对定位和绝对定位.希望可以以我的点点星光,让后来者少走弯路. 所谓相对定位,就是设置为 ...

  3. CSS中的相对定位和绝对定位

    1.元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,top这些偏移属性都是没有效果的, 使用相 ...

  4. css中的相对定位与绝对定位的区别

    1.绝对定位 position: absolute;绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定位或者相对定位的祖先元素).如果元素没有已定位的祖先元素,那么它的位置则是相对 ...

  5. css之position相对定位和绝对定位

    一.position的四个值:static.relative.absolute.fixed. 绝对定位:absolute和fixed统称为绝对定位 相对定位:relative 默认值:static 二 ...

  6. CSS网页中的相对定位与绝对定位

    在CSS中有这样的一个指令:(position),在DreamWeaver中文版中翻译为“定位”,常用的属性有两个:relative(相对)与 absolute(绝对).有很多朋友对这条指令的用法还是 ...

  7. div中的相对定位与绝对定位

    1.position:relative; 如果对一个元素进行相对定位,首先它将出现在它所在的位置上.然后通过设置垂直或水平位置,让这个元素“相对于”它的原始起点进行移动.(再一点,相对定位时,无论是否 ...

  8. CSS定位：相对定位、绝对定位和固定定位（relative absolute fixed）

    相对定位:position:relative; 不脱离文档流,参考自身静态位置通过top,bottom,left,right定位,并且可通过z-index进行层次分级. 绝对定位:position:a ...

  9. 遮罩层中的相对定位与绝对定位(Ajax)

    前提:公司最近做的一个项目列表,然后点击项目,出现背景遮罩层,弹出的数据框需要异步加载数据数据,让这个数据框居中,搞了两天终于总算达到Boss满意的程度,做了半年C/S,反过来做B/S,顿时感到技术还 ...

随机推荐

  1. 【Linux/CentOS】上手常见问题笔记

    场景:Web项目服务端想要运行在Linux系统上,还要编写一些自动化发布代码的Shell脚本,需要学习使用Linux系统. 环境:Windows系统下用虚拟机VMware Workstation Pr ...

  2. PHP——大话PHP设计模式——基本设计模式（工厂模式、单例模式、注册器模式）

  3. drupal

    一 devel 模块 配置->development->generate users 添加测试账号 php区块 结构->区块->switch user 使用者切换 结构-> ...

  4. Extjs4.x (MVC)Controller中refs以及Ext.ComponentQuery解析

    refs : Object[]5 Array of configs to build up references to views on page. For example: Ext.define(& ...

  5. css table第一列 宽度

    table{table-layout:fixed;}table tr td:first-child,table tr td:first-child{width:120px;} 首行第一个td定宽同列的 ...

  6. 【oneday_onepage】——Tastes differ!

    You know Ian and Felton can be really boring sometimes. They're always arguing, like. like children. ...

  7. JavaScript（五）：变量的作用域

    一.变量的分类 在JavaScript中变量分为两种: 全局变量 局部变量 二.变量的作用域 1.局部变量的作用域 局部变量:在函数内部定义的变量称为局部变量,其作用域为该函数内部,在该函数外部不能被 ...

  8. WebRTC源码分析（一）：安卓相机采集实现分析

    WebRTC 的代码量不小,一次性看明白不太现实,在本系列中,我将试图搞清楚三个问题: 客户端之间如何建立连接? 客户端之间如何实现数据传输? 音视频数据的采集.预览.编码.传输.解码.渲染完整流程. ...

  9. 安卓程序代写 网上程序代写[原]BluetoothAdapter解析

    这篇文章将会详细解析BluetoothAdapter的详细api, 包括隐藏方法, 每个常量含义. 一 BluetoothAdapter简介 1.继承关系 该类仅继承了Object类; 2.该类作用 ...

  10. Global Pose Estimation with an Attention-based Recurrent Network

    related work包含比较多,对SLAM和最近神经网络对于定位的工作介绍比较多.