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. [POJ2749]Building roads(2-SAT)

    Building roads Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 8153   Accepted: 2772 De ...

  2. MySQL注射绕过技巧（三）

    在测试一次注入的时候发现过滤了逗号 所以找到这个思路 第一次遇到的时候是看key哥挖洞  遇到后就想记录下来 正文 过滤了逗号  利用join来逐步查询 select*from(select 1)a ...

  3. BZOJ1002輪狀病毒 暴搜 + 找規律 + 高精度

    @[暴搜, 找規律, 高精度] Description 轮状病毒有很多变种,所有轮状病毒的变种都是从一个轮状基产生的.一个\(n\)轮状基由圆环上\(n\)个不同的基原子和圆心处一个核原子构成的,2个 ...

  4. JSON 与 JS 对象的关系

    很多人搞不清楚 JSON 和 Js 对象的关系,甚至连谁是谁都不清楚.简单来说: JSON 是 JS 对象的字符串表示法,它使用文本表示一个 JS 对象的信息,本质是一个字符串. 如 var obj ...

  5. ZOJ 3256 Tour in the Castle 插头DP 矩阵乘法

    题解 这题是一道非常好的插头题,与一般的按格转移的题目不同,由于m很大,要矩阵乘法,这题需要你做一个按列转移的插头DP. 按列转移多少与按格转移不同,但大体上还是基于连通性进行转移.每一列只有右插头是 ...

  6. HTML5项目笔记4：使用Audio API设计绚丽的HTML5音乐播放器

    HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用. 无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道 ...

  7. PWM DAC Low Pass Filtering

    [TI博客大赛][原创]LM3S811之基于PWM的DAC http://bbs.ednchina.com/BLOG_ARTICLE_3005301.HTM http://www.fpga4fun.c ...

  8. 【转】2012年7月12 – 腾讯公司 WEB高级应用开发工程师 最新面试题

    腾讯面试(WEB高级应用开发工程师<PHP>)非答案啊!!! 开始正题之前,容博主啰嗦两句吧,呵呵.(你也可跳过直接到红色字体看题!) 腾讯一直是我很敬重的企业,尽管小企鹅在战略上饱受争议 ...

  9. mysql知识点（二）

    1.什么叫聚集索引和非聚集索引? 答: 聚集索引:该索引中键值的逻辑顺序决定了表中相应行的物理顺序.      聚集索引确定表中数据的物理顺序.聚集索引类似于电话簿,后者按姓氏排列数据.由于聚集索引规 ...

  10. ICLR 2016 - Workshop Track International Conference on Learning Representations 论文papers

    ICLR 2016 - Workshop Track International Conference on Learning Representations May 2 - 4, 2016, Car ...