设置子父元素overflow:hidden，子元素absolute不显示问题

最新推荐文章于 2023-11-02 16:25:02 发布
最新推荐文章于 2023-11-02 16:25:02 发布
阅读量7.7k 收藏 2
点赞数 2
文章标签： javascript ViewUI
原文链接：https://juejin.im/post/5c3836f2e51d45517334730b
版权

需求描述

vue项目用的vue-awesome-swiper插件

实现下图结果：

为什么

溢出来的元素自然就隐藏了

解决

首先我想到了给swiper容器overflow-x:hidden然后overflow-y:visible没想到出来了下面的效果

最后看到一篇文章来到了灵感，我给最外面的盒子设置了padding-bottom:20px margin-bottom-20px解决

转载于:https://juejin.im/post/5c3836f2e51d45517334730b

weixin_33966095
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
IE overflow:hidden失效的解决方法
09-25
position和float是两种布局模式，在IE6下共用有时会导致用position定位的元素节点消失。绝对定位的元素节点是参照离它最近的已定位元素，所以父节点定位relative、子节点定位absolute是很常见的。
父元素与子元素之间的margin-top问题(css hack)
09-25
2. **设置`overflow: hidden`**：为父元素添加`overflow: hidden`属性可以阻止外边距折叠，同时不影响页面其他元素。这种方法比较通用，但可能导致滚动条的意外出现。 ```css .box1 { height: 200px; width: ...
当设置父元素overflow: hidden；子元素超出父元素时没有隐藏
热门推荐
_陌默
01-09 1万+
<div class="box"> <img src="http://img1.imgtn.bdimg.com/it/u=2335896061,645089826&fm=214&gp=0.jpg" alt=""> </div> 当我将img标签设置为position:absolute; 设置父元素 .box{ ...
html+css 如果父元素写了overflow:hidden；子元素如何不受父元素hidden影响
最新发布
qq_48959246的博客
11-02 2729
以上是用了网上说的三种方法，最后可以看出只有在overflow: hidden;外层书写position: relative;才能帮助overflow: hidden内层的子元素使用定位脱离被隐藏的命运。
父元素overflow: hidden；失效
yaoyao_mengyao的博客
04-23 361
父元素overflow: hidden;失效
父级overflow为scroll时，绝对定位的子元素会被隐藏或一起滚动
wjy397的专栏
11-13 1310
https://blog.csdn.net/yujin0213/article/details/79093480 需求：父级边框固定，里面的内容滚动 由于是图片边框，于是我把边框的上下部分单独切图，中间重复部分平铺 想要的效果图： 一开始的写法： html: <div class="paradise-wrap"> <div class="paradise"&gt...
html怎么把子列表隐藏,css – 如果父级是overflow,如何使子元素可见？隐藏？
weixin_36030121的博客
06-03 828
我有一个带有溢出的子元素：visible;并且父元素与overflow：hidden ;.子元素的高度高于父元素。如果属性溢出设置为可见，为什么子元素被隐藏？HTML：CSS：#container {width: 500px;height: 100px;border: 1px solid black;background: Gray;/*OVERFLOW*/overflow: hidden;}#m...
overflow:hidden不会隐藏所有子元素
c11073138的博客
04-03 9299
1、overflow:hidden不会被隐藏的情况拥有overflow:hidden样式的块元素内部的元素溢出有时候不会被隐藏。当同时满足以下条件：拥有overflow:hidden样式的块元素不具有position:relative和position:absolute样式；内部溢出的元素是通过position:absolute绝对定位，并且该定位元素的包含块是设置overflow:hidden元...
浅谈css元素居中
09-24
`，子元素设为`position: absolute; top: 50%; left: 50%;`，然后通过负外边距`margin-top: -height/2; margin-left: -width/2;`调整子元素位置，使其垂直居中。 3. **使用Flexbox布局**：在现代浏览器中，可以利用`...
12个HTML和css必须知道的重点难点问题1
08-08
可以通过设置父元素的 `overflow: hidden;` 或应用 `clearfix` 解决。 - 重叠问题：浮动元素与其他元素重叠时，根据元素类型和 `z-index` 规则决定层级关系。 5. **CSS 引入方式**： - 内联样式：通过 `style` ...
全面阐述overflowhidden属性
11-21
css中overflow:hidden CSS样式可以隐藏溢出的部分 好处就是可以防止网页变形
关于css兼容性问题及一些常见问题汇总
09-24
在所有浏览器中，子元素的上、下外边距有时会传递给父元素。可以通过以下几种方式解决： - a) 为父元素添加浮动； - b) 为父元素添加`position:relative`或`position:absolute`（但会脱离文档流）； - c) 使用`...
css层的定位问题--父元素设置overflow，绝对定位的子元素会被隐藏或一起滚动
Baby_加油_的博客
12-12 9280
话不多说，直接上图看问题 下图是有不符合需求的问题图，整个是个弹框，下拉框是一个ul列表，要的是这个列表在最高层级，但是图中却隐藏在了里面~~ 下图是理想结果 弹框是fixed定位，列表框外有一个relative定位，列表框是absolute定位，是一个多级定位组成，按理来说，在这种情况下，子元素的层级应该是最高的，那么为什么会出现这种问题呢，经查证，一个小小的属性造成了这一问题overflo...
css隐藏绝对定位元素,父元素overflow-y: scroll; 里面的子元素绝对定位被隐藏。
weixin_30328003的博客
08-03 2390
父级元素overflow-y: scroll; 里面的子元素绝对定位被隐藏。*{margin: 0;padding: 0;}.side{float: right;width: 300px;height: 100%;overflow-y: auto;}.item{position: relative;margin: 10px 0;}.item-hd{background-color: #ccc;fo...
CSS之定位
qq670471201的博客
11-19 187
CSS之定位 CSS定位有五种 static relative fixed absolute sticky static 为默认值 该是什么样 还是什么样， ------------------------------------------------------------------------------...
解决CSS中由于overflow导致子元素绝对定位错误
weixin_44557473的博客
04-19 3458
由于父元素设置overflow属性导致子元素绝对定位错误
css解决高度坍塌问题
qq_42628504的博客
06-06 286
解决子元素浮动造成父元素高度塌陷的问题的几种方法 一、子级方法 1 在子元素的最后添加一个高度为0的子元素，并且让它清除浮动 .clear{ clear: both; margin: 0; padding: 0;} 2.设置父元素的高度 #father {height: 600px; border:1px #000 solid; } 此种方式简单，但元素高度固定会降低扩展性 3.浮动元素后面加空div .clear{ clear: both; margin: 0; padding: 0;} 浮动的盒
父级div固定高度并设置超出隐藏，子级div内容超出隐藏可以垂直滚动的设置
BetterGG的博客
06-25 1万+
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,widt
Z-index优先级设置无效
musheqianqian的博客
01-12 1074
①父级元素溢出隐藏或者不显示。 ②父级元素层级低。 ③没有设置定位。
css中父元素overflow:hidden,子元素position:absolute,怎么让子元素超出父元素边界还能显示？
05-19
可以尝试使用父元素的 `overflow: visible` 属性，这样子元素就可以超出父元素的边界并且显示出来了。具体代码如下： ```css .parent { position: relative; overflow: visible; /* 父元素的 overflow 属性设置为 visible */ } .child { position: absolute; top: -20px; /* 子元素超出父元素顶部 20px */ left: -20px; /* 子元素超出父元素左边 20px */ } ``` 当然，如果你需要在父元素的一部分区域内让子元素超出边界，可以考虑在父元素中创建一个定位区域，然后在这个区域内使用 `overflow: visible` 属性。具体代码如下： ```css .parent { position: relative; } .overflow-area { position: absolute; top: 0; left: 0; width: 100px; height: 100px; overflow: visible; /* 定位区域设置 overflow 属性为 visible */ } .child { position: absolute; top: -20px; /* 子元素超出定位区域顶部 20px */ left: -20px; /* 子元素超出定位区域左边 20px */ } ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值