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
    评论
专栏目录
flex 弹性布局，最后一行数量不足一行 列表项目左对齐的解决办法
11-19
flex 弹性布局，最后一行数量不足一行 列表项目左对齐的解决办法，经过实际测试，亲自有效，一行的数量可以随意设置。非常有用！
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
解决弹性盒flex：1和固定定位position：fixed冲突的问题
YY的博客
12-23 771
解决弹性盒flex：1和固定定位position：fixed冲突的问题
当display:flex弹性布局与position:absolute/fixed定位一起用，会出现的问题与解决方法
qq_27717857的博客
02-28 9908
首先放出使用场景的截图： 使用场景 导航栏固定定位 导航栏内，平均分为四块，为了适配各种移动设备，使用了flex布局。 与此同时，产品经理要求：页面上滚越过封面图时，导航栏变为固定定位，浮在页面顶部。 拿到需求之后，思路就是先搞好布局，然后监听window.onscroll，当页面滚的距离大于封面图的时候，给ul加入position：fixed。 下面再现一下问题： &l...
css - 解决绝对定位和弹性布局同时出现时弹性布局flex失效的问题
qq_43886365的博客
09-07 4351
解决绝对定位和弹性布局同时出现时弹性布局flex失效问题
移动端拖拽 - 固定定位 fixed
办公研究所
07-21 465
移动端的项目经常会引入手势库来实现拖拽，不过如果只是一两个页面用到拖拽，再引入一个手势库就很不划算。最近的项目中就有这么一个需求： 因为就这一个地方需要拖拽，所以我就没有引入第三方库 移动端的拖拽有两种主流的实现方案： 1. 将元素设置为固定定位，然后在拖拽的时候修改其定位，实现拖拽的效果； 这种方案的优点是对布局没有要求，容易理解，缺点是性能低的时候会卡顿 2. 使用 transform 中的平移translate 属性实现拖拽。 这种方案的优点是拖拽效果很平滑，还可以设置过渡的时..
Flex布局
03-29
是W3C在2009年提出的一个新的布局方案。可以方便的实现各种页面布局。目前浏览器兼容如下：   (此图片来源于网络，如有侵权，请联系删除! )   Flex在移动端开发上已是主流，比如H5页面，微信小程序等等。   Why ...
flex弹性盒布局最后一行左对齐的实现思路
01-19
使用flex布局，如果是九宫格的话正好可以平分，如图 如果是我们只需要八块，如图 但是我们想让最后一块左对齐，依次排列，需要在元素的父级增加伪元素after，如图 <li></li> <li></li> <li></li> <li>...
详解CSS3伸缩布局盒模型Flex布局
09-22
在Flex布局中，一个容器通过设置`display`属性为`flex`或`inline-flex`变为Flex容器。容器的所有直接子元素自动成为Flex项目。`display: flex`使得容器成为块级Flex容器，而`display: inline-flex`则创建一个行内...
flex布局实现上下固定中间滑动的布局方式
11-20
例如这样的一个页面，希望有个头图，有个底部的底栏，中部内容区域可滑动。 简单介绍一下如何实现 固定头部和尾部，中间部分可滑动，使用flex布局 1.设置html，body高度为100% 2.设置最外层div的布局方式为弹性布局...
前端自适应布局方式--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，留出左右元素的宽度，既可以使中间元素自适应屏幕宽度。中间栏放到文档流前面，先行渲染。
微信小程序篇】七.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元素的属性（...
vue父子组件通信以及flex布局
李水灵的博客
01-24 1376
第一步：新建vue-cli项目 第二步：新建子组件 第三步： 子组件代码： &amp;lt;template&amp;gt; &amp;lt;div id=&quot;children&quot;&amp;gt; &amp;lt;p&amp;gt;{{item.name}}&amp;lt;/p&amp;gt; &amp;lt;p&amp;gt;{{item.age}}&amp
前端父元素设置绝对定位，子元素设置的flex不生效
qq_41910413的博客
07-21 949
当父元素设置绝对定位，子元素设置的flex会不生效， 解决办法是给父级加一个width:100%;
在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布局与定位 position: fixed 冲突处理
pany的博客
11-27 4511
情况：在做静态布局的时候，使用flex进行布局，将页面结构搞好了，但一旦加上position: fixed定位后，就会出现图一情况。 尝试处理：给整个需要定位的结构添加一层父容器，在父容器中进行定位，子容器进行flex布局，但还是无法得到想要的效果 最终处理：仍给整个需要定位的结构添加一层父容器，并父容器定位，同时添加left: 0; right: 0; ...
flex布局与定位
Z15800020057的博客
06-26 1058
flex布局，属性与常见定位
flex布局和定位问题
weixin_42306249的博客
04-10 1945
flex布局和定位可以同时存在一个标签吗？会有什么影响？？？ 父元素宽度确定，子元素宽度确定 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-w
在flex布局中，不要使用绝对定位（fixed、absolute）
热门推荐
蜗牛先生
01-04 1万+
昨天在写布局的时候遇到一个问题，在一部iPhone 5s上发现了一项布局错位问题，然而在其他机型上的布局都是正常的。 今天同事晃过一眼代码，就说flex布局中不要使用position定位，容易出现定位错误。 然后他帮我改了一个地方，去掉了flex布局，果然其中一个错位消失了。 ...
flex布局和定位相比
最新发布
04-16
Flex布局和定位是两种常用的页面布局方式，它们有一些相似之处，但也有一些不同之处。 相似之处： 1. 都可以用于实现页面的布局和定位。 2. 都可以通过设置属性来控制元素的位置和大小。 3. 都可以用于响应式设计，适应不同的屏幕尺寸。 不同之处： 1. Flex布局是一种基于弹性盒子模型的布局方式，通过设置容器和子元素的属性来实现灵活的布局。而定位是通过设置元素的位置属性（如position: absolute）来实现布局。 2. Flex布局更适合于一维布局（如行或列），可以方便地实现元素的水平或垂直排列，以及对齐和分布等操作。而定位则更适合于二维布局，可以通过设置top、left、right、bottom等属性来精确控制元素的位置。 3. Flex布局具有自适应性，可以根据容器的大小自动调整子元素的布局。而定位需要手动设置元素的位置和大小。 4. Flex布局相对简单易懂，适用于大部分常见的布局需求。而定位更加灵活，适用于一些特殊的布局需求。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值