专栏首页Jerry的SAP技术分享css position relative and absolute布局

css position relative and absolute布局

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://jerry.blog.csdn.net/article/details/100919505

Created by Jerry Wang, last modified on Sep 01, 2014

</html>

<style type="text/css">

.highlight 

{

background-color:yellow;

text-decoration:underline;

  width: 100px;

  height: 100px;

  display: block;

}

.div1{

background-color: red;

width: 100px;

position: absolute;

top: 90px;

left: 50px;

}

.div2{

background-color: blue;

width: 100px;

left: 100px;

}

.rule100{

background-color: black;

width: 100px;

}

</style>

<p>Jerry's <span class = "highlight">Hello</span></p>

<div class="div1">div1

<div class="div2">div2</div>

</div>

<div class="rule100">"100px"</div>

</html>

case 1: 当#div2 position为缺省值static(Elements render in order, as they appear in the document flow)时,按照其在document flow内的位置进行布局:

case2: position:absolute( The element is positioned relative to its first positioned (not static) ancestor element ).

因为现在div1的position布局为absolute,则div2会按照div1的相对位置进行布局。div1 start x offset = 50px, div2本身的left = 100px, 因此div2以相对于document 100+50 = 150px的起始位置进行布局:

注意在absolute的情况下,div2不仅位置改变,同时也脱离了document flow,因此其原来在div1内的位置已经不再存在:

case3: position: relative ( The element is positioned relative to its normal position ).

div2原本在div1内的位置为相对document偏移50px,因此最后的水平方向偏移为150px. div2虽然从表面上看已经偏离了原来的位置,但是实际上在document flow中仍然未改变,因此从视觉上相比case2,case3中的div1具有case2的2倍高度。

case4: div1的position设置为static. 此时top attribute则不再起作用。

case5: div1的position设置仍然为static,body的position为absolute. div2的css:

.div2{

background-color: blue;

width: 100px;

left: 200px;

top: -40px;

position: absolute;

}

div2在ui上消失,因为其y坐标在原点上方,并且从document flow里移除,因此div1的高度同case2.

如果div2改为relative,则其y坐标为static case下的值减去40,最后布局如下:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 批量设置Service Order成transferred状态

    版权声明:署名,允许他人基于本文进行创作,且必须基于与原先许可协议相同的许可协议分发本文 (Creative Commons)

    Jerry Wang
  • 如何将S/4HANA系统存储的图片文件用Java程序保存到本地

    然后我把这段代码封装到一个Function moduleZDIS_GET_MATERIAL_IMAGES里,在Java代码里消费这个function modul...

    Jerry Wang
  • 如何将S/4HANA系统存储的图片文件用Java程序保存到本地

    然后我把这段代码封装到一个Function moduleZDIS_GET_MATERIAL_IMAGES里,在Java代码里消费这个function modul...

    Jerry Wang
  • 解锁不可见索引新特性,处理ORA-01555故障

    何国亮 云和恩墨交付部技术顾问,获得 Oracle 11g OCM 认证。有超过 6 年超大型数据库专业服务经验,曾为通信运营商、银行、保险、政府、制造业...

    数据和云
  • 三十分钟成为 Contributor | 提升 TiDB Parser 对 MySQL 8.0 语法的兼容性

    TiDB 的一大特性就是和 MySQL 高度兼容,目标是让用户能够无需修改代码即可从 MySQL 迁移至 TiDB。要达成这个目标,需要完成两个提升兼容性的任务...

    PingCAP
  • 博世小功率变频器拆解

    变频器在工业生产中应用非常的广泛,橡胶行业的轮胎产线就有很多,而且轮胎产线环境恶劣,灰尘大,今天帮朋友修理一台力士乐的变频器,因为长期使用加上环境恶劣,变频器里...

    用户1605515
  • [每日一题]台球碰撞

    今天这题可大有来头了,湖南省第六届大学生计算机程序设计竞赛题目,比较经典也比较有名 题目描述 在平面直角坐标系下,台球桌是一个左下角在(0,0),右上...

    编程范 源代码公司
  • 如何用小数据提升餐厅毛利率

    餐饮企业因各种条件限制,毛利率的确定会相应变化。一个核心问题就是,毛利率实质上就是企业的定价水平。毛利率增大,虽然会提升获利水平,但也会因价格因素阻隔一定的顾客...

    机器学习AI算法工程
  • java中删除特定后缀名文件

    File file=new File("");//里面输入特定目录 File temp=null; File[] filelist= f...

    闵开慧
  • Go语言入门(四)Map&函数

    alexhuiwang

扫码关注云+社区

领取腾讯云代金券