<!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. visual studio 远程服务器返回了意外响应:(417)expectation failed

    解决方法: 修改devenv.exe.config文件,添加 <servicePointManager expect100Continue="false" /> C:\ ...

  2. android-Okhttp初步使用

    自从谷歌把android的请求框架换成Okhttp后,android开发人员对其的讨论就变的越来越火热,所有咱作为一枚吊丝android程序员,也不能太落后,所以拿来自己研究一下,虽然目前项目开发用的 ...

  3. SharePoint 2013 开发——搜索架构及扩展

    博客地址:http://blog.csdn.net/FoxDave SharePoint 2013高度整合了搜索引擎,在一个场中只有一个搜索服务应用程序(SSA).它集成了FAST,只有一个代码库 ...

  4. rails之 Migrations (转)

    1.简介 在rails中用migration可以很方便的管理数据库的结构.可以创建数据库,创建表,删除表,添加字段,删除字段,整理数据. migration就是一系列的class,这些类都继承了Act ...

  5. 安装生物信息学软件-R

    主要参考http://www.3fwork.com/b211/000091MYM021616/ Step 1 : sudo gedit /etc/apt/sources.list 添加到末尾 deb ...

  6. 永不消逝的电波（二）HackRF入门：家用无线门铃信号重放

    0×00 前言 在第一篇文章:永不消逝的电波(一):无线电入门篇 我们了解了一下无线电的发展史以及无线电的一些物理知识,在第二篇里我们将用HackRF录制家用门铃的无线信号,然后重放门铃信号. 门铃从 ...

  7. Mybatis-动态 SQL

    MyBatis 的强大特性之一便是它的动态 SQL. 如果你有使用 JDBC 或其他类似框架的经验,你就能体会到根据不同条件拼接 SQL 语句有多么痛苦.拼接的时候要确保不能忘了必要的空格,还要注意省 ...

  8. HDU5898、 HDU 2089（数位DP）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5898 题意:很明确,找出区间[l , r]中符合连续奇数为偶数,连续偶数为奇数的个数. 思路:dp[i ...

  9. ssh连接linux服务器只显示-bash-4.1#不显示路径解决方法

    ssh连接linux服务器只显示-bash-4.1#不显示路径时,我们只需要修改  ~/.bash_profile文件,如果不存在这个文件,那么新建一个,增加内容  export PS1='[\u@\ ...

  10. CI整合Smarty

    1.到相应的站点下载smarty模板: 2.将源代码中的libs目录复制到项目的libraries目录下,改名为smarty3.0 3.在项目目录的libraries文件夹内新建文件ci_smarty ...