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. 【点分治】【路径小于等于k的条数】【路径恰好等于k是否存在】

    POJ1741:Tree Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 29574   Accepted: 9915 Des ...

  2. bzoj 3931: [CQOI2015]网络吞吐量 -- 最短路+网络流

    3931: [CQOI2015]网络吞吐量 Time Limit: 10 Sec  Memory Limit: 512 MB Description 路由是指通过计算机网络把信息从源地址传输到目的地址 ...

  3. JavaScript学习笔记 isPrototypeOf和hasOwnProperty使用区别

    1.isPrototypeOf isPrototypeOf是用来判断指定对象object1是否存在于另一个对象object2的原型链中,是则返回true,否则返回false. 格式如下: object ...

  4. Unity UGUI之Text

    下图是Text组件的内容. Character(字符) Text--输入要显示的文本 Font--要渲染文本的字体类型(例如:黑体.宋体) FontStyle--是否要加粗,倾斜等. Normal-- ...

  5. PAT甲级1026. Table Tennis

    PAT甲级1026. Table Tennis 题意: 乒乓球俱乐部有N张桌子供公众使用.表的编号从1到N.对于任何一对玩家,如果有一些表在到达时打开,它们将被分配给具有最小数字的可用表.如果所有的表 ...

  6. memcached添加日志输出

    引子:qa的memcached总是隔一段时间挂掉,导致qa进不去.决定查一下原因,于是添加日志输出,等下次出错便于查阅.定位问题. memcache默认没有日志输出.如果想把memecache服务日志 ...

  7. [ring3反作弊篇] 基于EBP遍历调用栈及模块名

    http://blog.csdn.net/wangningyu/article/details/44569803

  8. Android开发利用Volley框架下载和缓存网络图片

    2013年Google I/O大会上推出了一种新的网络通信框架——Volley,Volley可是说是把AsyncHttpClient和Universal-Image-Loader的优点集于了一身,既可 ...

  9. 【spring boot】spring boot中使用@RestController不起作用，不返回json，依旧去找访问接口的请求地址对应的页面

    问题描述: spring boot中使用@RestController不起作用,不返回json,依旧去找访问接口的请求地址对应的页面 表现结果: 1>使用postman测试接口,表现为返回是40 ...

  10. JS实现经典生产者消费者模型

    因为node使用单线程的方式实现,所以,在此使用定时器timer取代线程thread来实现生产者消费者模型. 代码例如以下: var sigintCount = 0; var productArray ...