1、示例代码

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <title>父元素没有设置定位 position absolute 解析</title>

        <style type="text/css">

            html {

                border: 1px dashed green;

            }

            body {

                border: 1px dashed purple;

            }

            #first {

                width: 200px;

                height: 100px;

                border: 1px solid red;

                position: relative;

            }

            #second {

                width: 200px;

                height: 100px;

                border: 1px solid blue;

                position: absolute;

                top: 0;

                left: 0;

            }

        </style>

    </head>

    <body>

        <div id="first">relative</div>

        <div id="second">absoult</div>

    </body>

</html>

效果：

2、结论

absoulte方式在父级没有设置定位方式时是以<html>作为原点定位。

父元素没有设置定位 position absolute 解析的更多相关文章

  1. 父元素高度设置为min-height，子元素高度设置为100%，但实际上子元素高度你知道是多少吗？

    前言 给父元素一个min-height,子元素设置height:100%. 代码 <!DOCTYPE html> <html> <head> <title&g ...

  2. 相对于父元素的fixed定位的实现

    问题描述 之前在项目中,遇到了一个场景,需要实现相对于父元素的fixed定位:在父元素内拖动滚动条时,"fixed"定位的元素不能滑动,在外层拖动滚动条时,父元素及父元素内的所有元 ...

  3. 38.html----相对于父元素的fixed定位的实现

    之前在项目中,遇到了一个场景,需要实现相对于父元素的fixed定位:在父元素内拖动滚动条时,"fixed"定位的元素不能滑动,在外层拖动滚动条时,父元素及父元素内的所有元素跟着一起 ...

  4. css position absolute相对于父元素的设置方式

    手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元 大家知道css的position abs ...

  5. 定位 position: absolute & relative

    [position:absolute] 意思是绝对定位,他默认参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位,有以下属性: 1)如果没有TRBL,以父级 ...

  6. CSS(8)---通俗讲解定位(position)

    CSS(8)---通俗讲解定位(position) CSS有三种基本的定位机制: 普通流.浮动.定位.前面两个之前已经讲过,详见博客: 1.CSS(5)---通俗讲解盒子模型 2.CSS(6)---通 ...

  7. position:absolute实现垂直居中

    一些图标通常要垂直居中 如下所示: 而css中没有直接的样式.需要我们自己调试. 我用了position:absolute;来实现. 要想使得position:absolute;有效,它的父元素必须也 ...

  8. 绝对定位常见误区：position:absolute相对于谁定位、及当溢出时怎么隐藏

    1.绝对定位元素溢出父元素,怎么隐藏问题? 通常,为了让DIV子元素超出部分隐藏,都是在父元素设置overflow:hidden,这样即可防止子元素撑开父元素,使子元素能够溢出隐藏! 但是,对于pos ...

  9. 父元素设置overflow，绝对定位的子元素会被隐藏或一起滚动

    一般情况: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <met ...

随机推荐

  1. 51Nod1802 左偏树计数

    题目大意 求$n$个点的无标号左偏树个数 既然你都点进来了,那么估计也是奔着题解来的.... 废话少说.... 首先,左偏树有这么一些性质 设最右链长度为$r[p]$ 1.左偏树的子树仍然是左偏树 2 ...

  2. [BZOJ4012][HNOI2015]开店(动态点分治,树链剖分)

    4012: [HNOI2015]开店 Time Limit: 70 Sec  Memory Limit: 512 MBSubmit: 2168  Solved: 947[Submit][Status] ...

  3. [BZOJ4408&&BZOJ4299][FJOI2016 && Codechef]神秘数&&FRBSUM(主席树)

    4299: Codechef FRBSUM Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 550  Solved: 351[Submit][Statu ...

  4. Java Queue的测试

    上传图片没上去,提交的时候已经结束 代码链接

  5. Codeforces Round #300 B. Quasi Binary 水题

    B. Quasi Binary Time Limit: 1 Sec  Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/538/probl ...

  6. What is the Linux High Availabi

    What is the Linux High Availabi    简介:     高可用性群集的出现是为了使群集的整体服务尽可能可用,以便考虑计算硬件和软件的易错性.如果高可用性群集中的主节点发生 ...

  7. AC/DC 反激 (Flyback) 控制器

    AC/DC 反激控制器 (Flyback Controller) 用于将交流电转换为稳定.隔离的直流电以供给应用系统.交流电首先需整流为高压的直流电.返驰控制器的工作原理类似一个升-降压控制器 (Bu ...

  8. ubuntu上安装systemtap

    http://www.cnblogs.com/hdflzh/archive/2012/07/25/2608910.html

  9. java什么时候声明static方法

    1.经常用到的方法,可以声明为static,这样省去了每次new对象的内存空间,因为非static方法,需要new对象才能调用此方法.但因此也产生多线程访问线程安全问题 比如: 2.当一个方法或者变量 ...

  10. Gulp插件使用技巧

    目录: 插件的安装卸载 插件使用的基本流程 拆分任务 监听 默认任务 一.插件的安装卸载 安装: npm install gulp-less --save-dev 卸载 npm uninstall g ...