flex和absolute的巧妙碰撞

本是古典何须时尚 2023-06-04 09:59 5阅读 0赞

在学习flex布局时，发现一个很奇妙的特性记录一下。

<html>
    <head>
    <style type="text/css"> .div{ margin: 0% 0% 0% 0%; padding: 0% 0% 0% 0%; } body{ position:absolute; top: 50px; } .outer{ top: 50px; border: 2px solid green; } .div1{ display: flex; justify-content: center; align-items: center; border: 2px solid purple; box-sizing: border-box; margin-top: 100px; width: 1000px; height: 1000px; } .div2{ width: 500px; height: 500px; display: flex; justify-content: center; align-items: center; border: 2px solid red; box-sizing: border-box } .div3{ position: absolute; top: 0px; left: 0px; border: 2px solid blue; } </style>
    </head>
    
    <body>
    <div class='outer'>
      <div class='div1'>
          <div class='div2'>
              <div class=div3>
                  123123123
              </div>
          </div>
      </div>
    </div>
    </body>
    </html>

当我们在flex布局的子元素中使用absolute时，他会向上找到第一个position进行对齐，表示资源放弃flex布局的特性。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvZF93ZW4_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvZF93ZW4_size_16_color_FFFFFF_t_70]: /images/20230601/761dbc1851a742518e9a5f76d3e094f7.png

发表评论取消回复

表情：

评论列表（有 0 条评论，5人围观）

还没有评论，来说两句吧...

相关阅读

相关 unity物理碰撞检测和触发器碰撞检测的区别

场景：在 Unity 中，物理碰撞检测和触发器碰撞检测是两种不同的机制。 -------------------- 物理碰撞检测物理碰撞检测是指两个物体之间

灰太狼/ 2023年09月25日 19:57/ 0 赞/ 80 阅读

相关 flex和absolute的巧妙碰撞

在学习flex布局时，发现一个很奇妙的特性记录一下。 <html> <head> <style type="text/css"> .div{ marg

本是古典何须时尚/ 2023年06月04日 09:59/ 0 赞/ 6 阅读

相关 flex java 开发,flex 和 java (web)的组合开发

flex 和 java (web)的组合开发 1、开发环境：在myeclipse7.0中整合flex plup3.0, 安装flex plup3.0时,选myeclipse

客官°小女子只卖身不卖艺/ 2023年01月15日 04:55/ 0 赞/ 150 阅读

相关哈希表和碰撞算法

线性探测法哈希表结构体 include<iostream> include<string.h> using namespace std;

水深无声/ 2023年01月10日 14:35/ 0 赞/ 146 阅读

相关密码学系列之:碰撞抵御和碰撞攻击collision attack

简介 hash是密码学和平时的程序中经常会用到的一个功能，如果hash算法设计的不好，会产生hash碰撞，甚至产生碰撞攻击。今天和大家详细探讨一下碰撞攻击。什么

偏执的太偏执、/ 2022年10月17日 11:25/ 0 赞/ 209 阅读

相关 Flex和Silverlight

个人感觉是Flex好一些，有一个帖子：http://weblogs.asp.net/jezell/archive/2007/05/03/silverlight-vs-flash

╰+攻爆jí腚メ/ 2022年09月29日 04:06/ 0 赞/ 149 阅读

相关指针碰撞和空闲列表

虚拟机遇到一条new指令时，首先将去检查这个指令的参数是否能在常量池中定位到一个类的符号引用，并且检查这个符号引用代表的类是否已被加载、解析和初始化过。如果没有，那必须先执行相

曾经终败给现在/ 2022年09月11日 03:19/ 0 赞/ 163 阅读

相关在flex布局中，不要使用绝对定位（fixed、absolute）

昨天在写布局的时候遇到一个问题，在一部iPhone 5s上发现了一项布局错位问题，然而在其他机型上的布局都是正常的。今天同事晃过一眼代码，就说flex布局中不要使用posi

淡淡的烟草味﹌/ 2022年03月30日 02:16/ 0 赞/ 642 阅读

相关 Flex和Silverlight

个人感觉是Flex好一些，有一个帖子：http://weblogs.asp.net/jezell/archive/2007/05/03/silverlight-vs-flash

青旅半醒/ 2022年03月11日 06:43/ 0 赞/ 189 阅读

相关 TLAB、指针碰撞和空闲列表

> new对象与指针碰撞 new对象怎么就出问题了呢？ java中我们要创建一个对象,用关键字new就可以了。但是，在我们日常中，有很多生命周期很短的对象。比如：

素颜马尾好姑娘i/ 2021年06月10日 20:39/ 0 赞/ 349 阅读