Flex布局与position布局 存在的冲突问题

最新推荐文章于 2024-05-14 11:19:40 发布
最新推荐文章于 2024-05-14 11:19:40 发布
阅读量792 收藏 2
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_60146725/article/details/121044965
版权

之前在写页面的时候遇到了一个小问题

在定义一个无序列表 

 

 

 首先使用了flex 使它默认主轴为水平方向   随后使用position定位到自己所需位置  这些都正常显示效果没有问题     效果如下

然后在设置主轴方向之间的排序 就显示不出来该效果

 

 

 

 此时显示的与没有设置前一样  然后自己就试了下 就发现了解决办法：

可以给ul设置一个宽度：

此时就正常显示了 得到了想要的效果：

 

 

简单437
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解flex布局与position:absolute/fixed的冲突问题
01-19
之前笔者在开发项目的过程中就遇到了这个坑，flex布局与position:absolute/fixed的冲突问题。后来想到了解决办法，今天就与大家一起交流一下： 项目实战： 我们现在想做一个头部的导航栏，又想用fixed把它固定在上方，又想用弹性盒布局去设置它内部的样式，可是发现其中的弹性盒布局已经失效了。 HTML代码如下： 协会简介 协会章程 协会架构 资料下载 CSS代码如下： ul { position: fixed; display: flex;
2022.04.14-flex布局与position定位存在冲突
小龙跳动的博客
04-14 4048
情况：现在布局很多时候用到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布局与定位 position: fixed 冲突处理
pany的博客
11-27 4459
情况：在做静态布局的时候，使用flex进行布局，将页面结构搞好了，但一旦加上position: fixed定位后，就会出现图一情况。 尝试处理：给整个需要定位的结构添加一层父容器，在父容器中进行定位，子容器进行flex布局，但还是无法得到想要的效果 最终处理：仍给整个需要定位的结构添加一层父容器，并父容器定位，同时添加left: 0; right: 0; ...
解决【display：flex布局】遇上 【position: absolute / fixed 】的失效问题
柠檬不萌只是酸i
08-11 2万+
问题描述： 有个这样的页面，页面是通过flex布局的，现在想将头部( 我的订单栏 )固定，那么我们第一反应就是添加定位呀，position : fixed。但是问题来了，position可以添加，但是添加之后，页面变成这样了（如下所示）， 也就是设置的display:flex 失效了，不起作用。 position 一般常用的属性值有三种： relative 、 absolut...
css 中的position定位和flex布局分析
热门推荐
我弟是个程序员
06-14 3万+
position定位 fixed绝对定位 fixed 生成绝对定位的元素，相对于浏览器窗口（或手机等终端窗口）进行定位。元素的位置通过&amp;amp;amp;amp;amp;amp;quot;left&amp;amp;amp;amp;amp;amp;quot;, &amp;amp;amp;amp;amp;amp;quot;top&amp;amp;amp;amp;amp;amp;quot;, &amp;amp;amp;amp;amp;amp;quot;rig
解决弹性盒flex：1和固定定位position：fixed冲突的问题
YY的博客
12-23 752
解决弹性盒flex：1和固定定位position：fixed冲突的问题
《前端》CSS之定位position与flex布局--2020年7月26日
BelleDiao的博客
07-26 543
一、CSS定位的属性 1、position 语法： position：static | relative | absolute | fixed | center | page | sticky 默认值：static 适用于：除display属性定义为table-column-group | table-column之外的所有元素。 取值： static：对象遵循常规流。此时4个定位偏移属性不会被应用。 relative：对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bo
flex布局Flex实现常见布局的汇总
04-11
然后其所有的直接子元素就变成flex子元素了，在flex里存在两根轴，叫主轴和交叉轴，互相垂直，主轴默认水平，flex子元素默认会沿主轴排列，可以控制flex子元素在主轴上伸缩，主轴方向可以设置，相关的css属性分为两...
flex布局实现上下固定中间滑动的布局方式
11-20
本文主要介绍了flex布局实现上下固定中间滑动的布局方式，分享给大家，具体如下: 例如这样的一个页面，希望有个头图，有个底部的底栏，中部内容区域可滑动。 简单介绍一下如何实现 固定头部和尾部，中间部分可滑动...
flex布局兼容性问题小结
01-21
一.W3C各个版本的flex 2009 version 标志：display: box; or a property that is box-{*} (eg. box-pack) 2011 version 标志：display: flexbox; or the flex() function or flex-pack property 2012 version 标志：...
Flex布局基础知识
01-08
本人认为挺重要的，首写博客来巩固一下自己今天所学的有关Flex布局的知识，并与大家分享，内容如有错误，欢迎大家来给我指点一下。 文章目录Flex布局Flex简介弹性容器弹性元素主轴与纵轴弹性容器样式弹性元素样式 >...
火狐浏览器中的flex－box与position冲突的解决
喵咪不爱吃鱼的博客
08-18 3568
最近做了一个公司的分享页面，上面的导航栏，是采用flex-box和position的绝对定位，进行实现的，在chrome和safair中的实现的都是好的，本来以为万事大吉，就只差发布的时候，却出现呀，老大兴冲冲的拿来火狐浏览器的，妹子当时就泪崩了，我天，竟然冲突了。 然后妹子就火急火燎进行上网百度呀谷歌呀，最终发现了问题的所在，原因是因为
picoCTF-Web Exploitation-Web Gauntlet
huckers的博客
05-12 463
按照提示，需要用admin登录，查看filter.php，这应该是一个SQL注入题，提示我们可以使用无痕浏览器来以便cookie可以不用每次清除。中展示了sql过滤逻辑，可以回味一下，尝试用不同的关键字来注入。提示sql过滤or，我们使用。
前端Vue架构
weixin_45678402的博客
05-12 294
defineProperty：监听范围比较窄，只能通过属性描述符去监听已有属性的读取和赋值；兼容性较差，只能兼容支持ES6 的浏览器（要求监听数据是对象）这样写的话，依赖收集只能收集到属性c；如果访问的属性值还是一个对象，对属性值再次进行代理；创建视图的函数（render）和数据之间的关联；当数据发生变化的时候，希望render重新执行；下面的用法，只能收集到c，收集不到c1。依赖收集：a color: #f00。依赖收集：a color: #f00。如何知晓数据对应的函数；监听数据的读取和修改；
前端面试题日常练-day05 【面试题】
qq_44640575的博客
05-11 386
解释：在CSS中，使用`.`作为类选择器，可以选择所有具有指定class名称的元素。例如，如果想选择所有class为"my-class"的元素，可以使用`.my-class`选择器来实现。这样的选择器可以为元素添加特定的样式或者在JavaScript中进行处理。
Unable to start ServletWebServerApplicationContext due to missing ServletWeb
最新发布
s_sos0的博客
05-14 364
Unable to start ServletWebServerApplicationContext due to missing ServletWeb
根据地址栏url上key获取值
wwf1225的博客
05-10 264
/ 根据url上key获取值，key为参数名字，例如token。
前端页面 贴边拖拽 盒子
m0_46512929的博客
05-13 218
vue 悬浮球(带自动吸附功能)_vue悬浮球-CSDN博客
Java Web开篇
2403_82385265的博客
05-13 168
这是前端和后端组成的系统的框架结构。
css flex布局与grid布局
07-12
CSS Flex布局与Grid布局是两种常用的网页布局方式。它们都是在CSS3中引入的新特性，可以更灵活地控制网页元素的排列和布局。 Flex布局（弹性布局）是一种一维布局模型，主要用于在容器内对子元素进行排列。通过设置容器的属性，可以实现子元素的水平或垂直居中、等分空间、自动调整大小等效果。Flex布局相对简单易用，适用于各种不同尺寸的容器和子元素的布局。 Grid布局（网格布局）是一种二维布局模型，主要用于将容器划分为网格，并通过设置网格的行和列来控制子元素的位置。Grid布局可以实现复杂的网格结构，支持自适应和响应式设计，适用于多栏布局、网页页面等。 两种布局方式各有特点，可以根据具体的布局需求选择使用。在实际开发中，也可以将两种布局方式结合使用，灵活地应用于不同的网页布局场景。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值