flex布局与定位叠加一个值得注意的地方

最新推荐文章于 2023-10-09 19:24:21 发布
最新推荐文章于 2023-10-09 19:24:21 发布
阅读量1.3k 收藏 5
点赞数 2
分类专栏： CSS 文章标签： css flex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21522331/article/details/108002875
版权

1.当父元素使用了flex布局，再使用相对定位，然后子元素再使用绝对定位。那么父元素的flex所设定的效果将会对所有绝对定位的子元素产生相同的影响！

2.定位属性的优先级要大于flex布局的优先级

ArthurHsing
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
弹性盒模型（1）------Flex布局对子元素影响
骆小胖~
01-24 2450
详解CSS3伸缩布局盒模型Flex布局
09-22
在Flex布局中，一个容器通过设置`display`属性为`flex`或`inline-flex`变为Flex容器。容器的所有直接子元素自动成为Flex项目。`display: flex`使得容器成为块级Flex容器，而`display: inline-flex`则创建一个行内...
flex 弹性布局，最后一行数量不足一行 列表项目左对齐的解决办法
11-19
flex 弹性布局，最后一行数量不足一行 列表项目左对齐的解决办法，经过实际测试，亲自有效，一行的数量可以随意设置。非常有用！
在flex之上堆叠，并且使用%宽高和%定位
usa_rin的博客
10-09 169
意思是h2基于当前位置向上偏移1个div的高度，且指定h2的高为div的高。因此要先把h2设为relative（一条高度0的横线），然后h3设为absolute，这样h2用top:n%就可以在div上下移动百分比了，h3的高度也可以使用百分比。top语句：基于最近的父元素（必须是relative定位）的顶部向下偏移（%宽度也基于该元素）top语句：基于当前位置向下偏移，实际位置和占空间的位置会不同。如果h2设为absolute，百分比宽高和定位不会基于div，而是它之上的relative元素。
Flex 组件的定位和布局
iceice0o0o的专栏
05-09 623
Flex 组件的定位和布局   大多数 Flex 容器使用预定义的规则集来自动定位您在其内定所有子组件。如果您使用 Canvas 容器, 或者 Application 或 Panel 容器,其 layout 属性被设置为 "absolute", 则可以为其子级指定绝对位置, 或者使用基于限制的布局。 在 Flex 应用程序中定位组件的方法有三
css - 解决绝对定位和弹性布局同时出现时弹性布局flex失效的问题
qq_43886365的博客
09-07 4351
解决绝对定位和弹性布局同时出现时弹性布局flex失效问题
当display:flex弹性布局与position:absolute/fixed定位一起用，会出现的问题与解决方法
qq_27717857的博客
02-28 9908
首先放出使用场景的截图： 使用场景 导航栏固定定位 导航栏内，平均分为四块，为了适配各种移动设备，使用了flex布局。 与此同时，产品经理要求：页面上滚越过封面图时，导航栏变为固定定位，浮在页面顶部。 拿到需求之后，思路就是先搞好布局，然后监听window.onscroll，当页面滚的距离大于封面图的时候，给ul加入position：fixed。 下面再现一下问题： &l...
Flex布局
03-29
是W3C在2009年提出的一个新的布局方案。可以方便的实现各种页面布局。目前浏览器兼容如下：   (此图片来源于网络，如有侵权，请联系删除! )   Flex在移动端开发上已是主流，比如H5页面，微信小程序等等。   Why ...
flex弹性盒布局最后一行左对齐的实现思路
01-19
使用flex布局，如果是九宫格的话正好可以平分，如图 如果是我们只需要八块，如图 但是我们想让最后一块左对齐，依次排列，需要在元素的父级增加伪元素after，如图 <li></li> <li></li> <li></li> <li>...
flex布局实现上下固定中间滑动的布局方式
11-20
例如这样的一个页面，希望有个头图，有个底部的底栏，中部内容区域可滑动。 简单介绍一下如何实现 固定头部和尾部，中间部分可滑动，使用flex布局 1.设置html，body高度为100% 2.设置最外层div的布局方式为弹性布局...
微信小程序篇】七.UI精讲之布局基础 flex布局和相对绝对定位
TheNew_One的博客
01-15 1362
布局基础 flex布局 1. flex容器和元素 设置Flex container 改变主轴和交叉轴的关系 2. flex容器的属性 flex-direction 决定元素的排序方向 flex-wrap 决定元素如何换行（行满的时候） flex-flow 上2者简写 justify-content 元素在主轴上的对齐方式 align-items 元素在交叉轴上的对齐方式 3. flex元素的属性（...
解决弹性盒flex：1和固定定位position：fixed冲突的问题
YY的博客
12-23 771
解决弹性盒flex：1和固定定位position：fixed冲突的问题
前端自适应布局方式--float、flex、负margin、绝对定位
qq_45633813的博客
09-09 543
使用圣杯布局首先需要在center元素外部包含一个div，包含div需要设float属性使其形成一个BFC (Block formatting context)直译为**“块级格式化上下文”**，它是一个独立的渲染区域。并设置宽度，并且这个宽度要和left块的margin负值margin-left: -100% 进行配合。，后面的center会自然流动到他们上面，然后center使用margin属性left和right，留出左右元素的宽度，既可以使中间元素自适应屏幕宽度。中间栏放到文档流前面，先行渲染。
2022.04.14-flex布局与position定位存在冲突
小龙跳动的博客
04-14 4089
情况：现在布局很多时候用到flex方式，有次我将flex布局后的元素B，然后给元素B添加position定位，发现元素B无法被子元素撑开 <!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"/> <title>fle
移动端拖拽 - 固定定位 fixed
办公研究所
07-21 465
移动端的项目经常会引入手势库来实现拖拽，不过如果只是一两个页面用到拖拽，再引入一个手势库就很不划算。最近的项目中就有这么一个需求： 因为就这一个地方需要拖拽，所以我就没有引入第三方库 移动端的拖拽有两种主流的实现方案： 1. 将元素设置为固定定位，然后在拖拽的时候修改其定位，实现拖拽的效果； 这种方案的优点是对布局没有要求，容易理解，缺点是性能低的时候会卡顿 2. 使用 transform 中的平移translate 属性实现拖拽。 这种方案的优点是拖拽效果很平滑，还可以设置过渡的时..
flex布局实现叠在另一个div之上_Flex布局
weixin_39573981的博客
12-20 974
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。任何一个容器都可以指定为Flex布局。#box{display: flex;width: 500px;height: 300px;border: 10px solid red;}一：有六个属性设置在box父容器上，...
flex与绝对定位间的兼容问题
The_Sake的博客
12-24 1632
在做小程序时，在低版本IOS遇到了flex与绝对定位一起用的问题，会导致样式冲突， 当在flex里嵌套有绝对定位的元素时就会出现， 但是在绝对定位嵌套flex就不会出现。 最新的IOS系统基本上就没有这个问题。...
前端父元素设置绝对定位，子元素设置的flex不生效
qq_41910413的博客
07-21 949
当父元素设置绝对定位，子元素设置的flex会不生效， 解决办法是给父级加一个width:100%;
flex布局与定位 position: fixed 冲突处理
pany的博客
11-27 4511
情况：在做静态布局的时候，使用flex进行布局，将页面结构搞好了，但一旦加上position: fixed定位后，就会出现图一情况。 尝试处理：给整个需要定位的结构添加一层父容器，在父容器中进行定位，子容器进行flex布局，但还是无法得到想要的效果 最终处理：仍给整个需要定位的结构添加一层父容器，并父容器定位，同时添加left: 0; right: 0; ...
flex布局和定位相比
最新发布
04-16
Flex布局和定位是两种常用的页面布局方式，它们有一些相似之处，但也有一些不同之处。 相似之处： 1. 都可以用于实现页面的布局和定位。 2. 都可以通过设置属性来控制元素的位置和大小。 3. 都可以用于响应式设计，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值