一、绝对定位参考点

1.规律：

（1）默认情况下所有的绝对定位的元素，无论有没有祖先元素，都会以body作为参考点。

<style>

        .box1{

            width: 300px;

            height: 300px;

            background-color: red;

            /*position:absolute;*/

            /*left:0px;*/

            /*bottom:0px;*/

        }

        .box2{

            width: 200px;

            height: 200px;

            background-color: yellow;

            position: absolute;

            left:0px;

            bottom:0px;

        }

</style>

</head>

<body>

<div class="box1">

    <div class="box2"></div>

</div>

（2）如果有一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，那么这个绝对定位的元素就会以定位流的那个祖先元素为参考点。


        .box1{

            width: 300px;

            height: 300px;

            background-color: red;

            position:absolute;

            left:0px;

            bottom:0px;

        }

        .box2{

            width: 200px;

            height: 200px;

            background-color: yellow;

            position: absolute;

            left:0px;

            top:0px;

        }

注意点：i.只要是这个绝对定位元素的祖先元素都可以。ii.指的定位流是指绝对定位/相对定位/固定定位，定位流中只有静态定位是不行的。

（3）如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，而且祖先元素中有多个元素都是定位流，那么这个绝对定位的元素会以离它最近的祖先元素作为参考点。

 .......上面的代码不变..........

        .box3{

            width: 100px;

            height: 100px;

            background-color: black;

            position:absolute;

            right:0px;

            bottom:0px;

        }

 .........省略代码.......

 <div class="box1">

    <div class="box2">

        <div class="box3"></div>

    </div>

</div>

二、绝对定位的注意点

（1）如果一个绝对定位的元素是以body作为参考点，那么其实是以网页首屏的宽度和高度作为参考点的，而不是以整个网页的宽度和高度作为参考点的。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>D152_LimeLightOfAbsolutePosition</title>

    <style>

        .box1{

            width: 100px;

            height: 100px;

            background-color: red;

            position:absolute;

            bottom:0px;

            right:0px;

​

        }

        .box2{

            width: 2000px;

            height: 100px;

            background-color: blue;

            position:

        }

        .box3{

            width: 200px;

            height: 2000px;

            background-color: black;

​

        }

</style>

</head>

<body>

<div class="box1"></div>

<div class="box2"></div>

<div class="box3"></div>

</body>

</html>

（2）一个绝对定位的元素会忽略祖先元素的padding属性。

       .box4{

            height: 300px;

            width: 300px;

            background-color: yellow;

            padding:50px;

            /*position:absolute;*/

            /*boder:20px  black ;*/

        }

        .box5{

            height: 100px;

            width: 100px;

            background-color: red;

            position:absolute;

            left:0px;

            top:0px;     

        }

    </style>

</head>

<body>

<div class="box4">

    <div class="box5"></div>

</div>

三、源码：

D151_ReferencePointOfAbosulotePositoning.html

D152_LimeLightOfAbsolutePosition.html

地址:

https://github.com/ruigege66/HTML_learning/blob/master/D151_ReferencePointOfAbosulotePositoning.html

https://github.com/ruigege66/HTML_learning/blob/master/D152_LimeLightOfAbsolutePosition.html

2.CSDN：https://blog.csdn.net/weixin_44630050

3.博客园：https://www.cnblogs.com/ruigege0000/

4.欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流，后台回复“礼包”获取Java大数据学习视频礼包

HTML连载58-绝对定位的参考点以及注意事项的更多相关文章

  1. CSS的三种手段让元素脱离标准本文档流——浮动、绝对定位、固定定位

    1.浮动 浮动是CSS中用到的最多的一个选项,他有三个性质.关于浮动我们要强调一点,永远不是一个东西单独浮动,浮动都是一起浮动,要浮动,大家都浮动. 1.1 浮动元素脱离标准文档流 1.1.1 大概描 ...

  2. UWA 技术分享连载 转载

    技术分享连载1 Q1:Texture占用内存总是双倍,这个是我们自己的问题,还是Unity引擎的机制? Q2:我现在发现两个因素直接影响Overhead,一个是Shader的复杂度,一个是空Updat ...

  3. 前端CSS - 相对定位,绝对定位,固定定位

    前端CSS - 相对定位,绝对定位,固定定位 1.1 相对定位 position:relative 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置的微调. 也就是说,如果一个盒子想进 ...

  4. WEB学习 -相对定位、绝对定位、固定定位、z-index

    相对定位 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置调整. .不脱标,老家留坑,形影分离 也就是说相对定位不脱标,真实位置是在老家,只不过影子出去了,可以到处飘. 3.相对定位用 ...

  5. css之定位

    定位有三种,分别是相对定位 position:relative; .绝对定位 position:absolute; .固定定位 position:fixed; 相对定位 相对定位,就是微调元素位置的, ...

  6. HTML和CSS高级指南——定位详解

    本文由大漠根据Shay Howe的<An Adavnced Guide to HTML & CSS>第二课<Detailed Positioning>所译,整个译文带有 ...

  7. 【经验】css

    1.父元素overflow:hidden,当父元素大小减小到不容纳子元素时,会出现滚动条.2.input的盒模型尺寸基准是content-box,它的宽度将是以width-border计算,也就是说一 ...

  8. CSS属性：定位属性（图文详解）

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. CSS的定位属性有三种,分别是绝对定位.相对定位.固定定位. posit ...

  9. 前端技术之_CSS详解第六天--完结

    前端技术之_CSS详解第六天--完结 一.复习第五天的知识 a标签的伪类4个: a:link 没有被点击过的链接 a:visited 访问过的链接 a:hover 悬停 a:active 按下鼠标不松 ...

随机推荐

  1. SpringCloud之Fegin学习笔记

    以下部分内容来源于网络摘抄~ 1.作用 Feign 是一种声明式.模板化的 HTTP 客户端.在 Spring Cloud 中使用 Feign,可以做到使用 HTTP 请求访问远程服务,就像调用本地方 ...

  2. 洛谷P4027 [NOI2007]货币兑换

    P4027 [NOI2007]货币兑换 算法:dp+斜率优化 题面十分冗长,题意大概是有一种金券每天价值会有变化,你可以在某些时间点买入或卖出所有的金券,问最大收益 根据题意,很容易列出朴素的状态转移 ...

  3. call和apply的应用

    相同点 都能够改变方法的执行上下文(执行环境),将一个对象的方法交给另一个对象来执行,并且是立即执行 var arrayLike = { 0: 'item1', 1: 'item2', 2: 'ite ...

  4. NSLayoutConstraint 开源框架

    https://github.com/cloudkite/Masonry Masonry is a light-weight layout framework which wraps AutoLayo ...

  5. C++数组或vector求最大值最小值

    可以用max_element()及min_element()函数,二者返回的都是迭代器或指针. 头文件:#include<algorithm> 1.求数组的最大值或最小值 1)vector ...

  6. day70test

    day_70: #api / urls: from django.conf.urls import url from . import views urlpatterns = [ url(r'^car ...

  7. PKU--1267 Cash Machine(多重背包)

    题目http://poj.org/problem?id=1276 分析 这是一个多重背包的问题,可以把请求的金额当作背包的重量,而货币的面值就是价值又是重量. 于是这个问题便很好理解背包了. #];; ...

  8. wpf之渐变色LinearGradientBrush

    xmal代码: <Grid Name="grid1"> <Grid.Background> <LinearGradientBrush> < ...

  9. Nginx是什么？

    Nginx是什么? Nginx ("engine x") 是一个高性能的 HTTP 和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器.一直纳闷这个X是怎么来 ...

  10. python基础-三元表达式/列表推导式/生成器表达式

    1.三元表达式:如果成立返回if前的内容,如果不成立返回else的内容 name=input('姓名>>: ') res='SB' if name == 'alex' else 'NB' ...