<!doctype html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <title></title>

 <style type="text/css">

 html,body,div{margin: 0; padding: 0; border:0; }

 #out{height: 200px; width: 800px; background: #f00; margin-top: 20px;margin-left: 20px; position:relative;}//红

 #mid{height: 100px; width: 600px;background: #0f0; margin-left: 20px; }//绿

 #center{height: 60px; width: 300px; background: #00f; position: absolute; top:10px; left: 10px;}//蓝

 </style>

 </head>

 <body>

 <div id="out">

 　　<div id="mid">

 　　　　<div id="center">

 　　　　　　绝对定位

 　　　　</div>

 　　</div>

 </div>

 </body>

 </html>

DIV使用绝对定位，其样式left,top等参照标准是从里向外找到第一个position不为static(DIV默认情况下都是static)的DIV为止。假如没有找到，则其参照标准就是BODY

css绝对定位问题的更多相关文章

  1. CSS的定位问题总结

    CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. 定位的基本思想很简单,它允许 ...

  2. 23、css的定位问题

    1.positon:relative相对定位 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  3. CSS中定位问题

    通过使用 position 属性,我们可以选择 4 种不同类型的定位,这会影响元素框生成的方式. position 属性值的含义: static 元素框正常生成.块级元素生成一个矩形框,作为文档流的一 ...

  4. css学习_写法规范、选择器

    1.css(层叠样式表)样式主要目的(让页面更好看些) css尽量不要写内联样式,保证结构和样式分离原则: html专门负责结构,css专门负责样式. 2.css写法规范 选择器  { 属性 :值 : ...

  5. js问题 项目问题

    项目问题1. js 中字符串替换函数var a = 'fajlfjal'a.replace(/b/,'a') // 不能直接改变a 而是返回替换后的值 2. vue 属性绑定中 class style ...

  6. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  7. 关于CSS 的position定位问题

    对于初学者来说,css的position定位问题是比较常见的.之前搞不清楚postion定位是怎么回事,排版一直歪歪斜斜的,老是排不好 css的定位一般来说,分为四种: position:static ...

  8. 【从0到1学Web前端】CSS定位问题一(盒模型,浮动,BFC) 分类： HTML+CSS 2015-05-27 22:24 813人阅读 评论(1) 收藏

    引子: 在谈到css定位问题的时候先来看一个小问题: 已知宽度(假如:100px)div框,水平居中,左右两百年的分别使用div框填充.且左右div自适应. 效果如下图: 这个问题的难点主要是浏览器宽 ...

  9. CSS中margin和position:relative的定位问题

    一.代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

随机推荐

  1. w3school一个学习编程的好地方！

    http://www.w3school.com.cn/index.html 每天过来学习几篇.

  2. OC基础--类

    都是注释哈 类的组成: C语言中函数分为声明和实现 OC中定义一个类也分为声明和实现, 也就是说以后我们在OC中定义类, 就是在写类的声明和实现 编写类的声明和实现: 声明 .h: /*  行为方法: ...

  3. CodeForces 688E-The Values You Can Make

    题意: 给出n,k,分别代表硬币的数量与巧克力的价格,n个整数c1,c2,...ci...cn(ci代表第i块硬币的值);你可以从n块硬币中拿出金额恰好为k的硬币数并将其中的任意两块硬币组合得到一个数 ...

  4. 当powershell遇上mysql引发的血案

    ------------------[故事来由]------------------ 起因:群友问:把cmd.exe /c a:\mysql5.6\bin\mysql.exe -uroot < ...

  5. C++ explicit关键字应用方法详解

    C++编程语言中有很多比较重要的关键字在实际编程中起着非常重要的作用.我们今天为大家介绍的C++ explicit关键字就是其中一个应用比较频繁的关键字.下面就让我们一起来看看这方面的知识吧. C++ ...

  6. WebView WebViewClient WebChromeClient

    在android中,浏览器的功能分成几个部分,每个部分分工明确,互相协作.其中: 1. WebView :专门负责网页数据解析和渲染: 2. WebViewClient :帮助WebView处理各种请 ...

  7. Hadoop随笔（一）：工作流程的源码

    一.几个可能会用到的属性值 1.mapred.map.tasks.speculative.execution和mapred.reduce.tasks.speculative.execution 这两个 ...

  8. jquery 调用ajax返回json

    ie调用可以,火狐和chrome皆失败,找了半天原因. 被屏蔽了. 火狐和chrome 对同一个域名不同端口的调用也严格限制,不给调用.只能用jsonp. 查看网络的返回状态,错误信息,F12 很重要 ...

  9. 为什么在保护模式下IA-32处理器最高可访问4GB的内存

    在保护模式下,IA-32处理器可访问最高达4GB的内存,这是32位无符号二进制整数地址能够寻址的上限.  今天看汇编的时候发现书里带过一句,不太明白为什么内存上限是4GB,就搜了一下,总结了一下答案. ...

  10. C语言之const和define

    const修饰的是只读变量,不是常量,其值在编译时不能被使用,因为编译器在编译时不知道其存储的内容.编译器通常不为普通const只读变量分配存储空间,而使将他们保存在符号表中,这使得他成为一个编译期间 ...