假设div里面设置overflow:hidden，里面有select框，被遮住怎么办？

最新推荐文章于 2022-11-16 16:44:59 发布
最新推荐文章于 2022-11-16 16:44:59 发布
阅读量1.7k 收藏 1
点赞数
分类专栏： 前端技术文章 文章标签： javascript css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sdasadasds/article/details/125913792
版权
  • 如果select框用的是原生的一般不会被遮住的。
  • 如果用的是插件或者自己写的，那么可能会被遮住，他被遮住的原因就是因为父级元素div里面写了overflow:hidden，导致一旦超出这个盒子就会被隐藏掉，要想解决这个问题，那么我们可以改变这个下拉框的参照物，利用定位给他调整到指定的位置，利用z-index将层级提高，这样就不会受到父元素的限制了。
  • *陆荣涛前端学习交流Q群858752519
    加群备注：CSDN推荐
千锋HTML5大前端
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
技术解决2——导航下拉菜单被select框遮盖问题
weixin_30635053的博客
12-24 463
导航的下拉菜单被靠近导航的select框遮住了，这个情况只在IE6情况下发生，属于IE6的一个缺陷，先不管多么痛恨IE的种种不是吧，现在网上比较流行的方法目前大致有三种： 1.点击下拉菜单隐藏select //我觉得这个方法不太实用 2.把下拉菜单放在iframe元素上面 3.JavaScript模拟一个select菜单 不使用系统默认的select //我感觉这个操作起来比较麻烦，...
解决overflow:hidden与定位一起使用子元素定位后元素被裁剪，隐藏不见问题
热门推荐
marendu的博客
06-16 2万+
示例如下： <body> <div class="b"> b <div class="c"> c </div> </div> </body> //css <style> .b{ position: absolute; width: 300px; height: 300px; backgrou
select挡住div的5种解决方法(转)
管子（zero）的杂乱空间
11-28 1579
<!--google_ad_client = "pub-4490194096475053";/* 内容页,300x250,第一屏 */google_ad_slot = "3685991503";google_ad_width = 300;google_ad_height = 250;//--><script type="text/javascript"src="
鼠标hover父级添加overflow，弹出框被隐藏问题。
yummry的博客
03-08 5227
1.老铁碰到问题，发到群里边。类似于二级联动下拉列表，由于需求改变，要求一级下拉列表添加滚动条，乍一听没毛病，一个overflow就解决的问题。然后聊着聊着发现了问题先发下原始图：效果图如下：html代码：主要问题：给父元素添加overflow：scroll，子元素的弹出框会受影响。效果做完之后滚动条会影响效果，鼠标在经过滚动条移动到右侧弹出框，弹出框直接消失。各种百度发现overflow影响的是...
前端框架layui下拉框被遮挡问题
一勺菠萝丶的博客
12-15 1万+
      在使用layui做下拉框选项的时候发现有时候下拉框会被遮挡或者根本就出不来的现象于是看了一下审查元素发现原本的div只有这么大仔细找了一下发现是layui自带的class属性问题，overflow:hidden，所以下拉框出现的内容被隐藏了解决方法：在页面里面找到对应div的class 给overflow新的属性visible即可(默认值。内容不会被修剪，会呈现在元素框之外。)即可显示...
Div被Select挡住解决办法
fengjunoo的专栏
11-19 87
Div被Select挡住解决办法 Div下拉菜单被Select挡住的解决办法 下拉菜单 bbbbbbb ccccccc ccccccc ccccccc ccccccc te...
jqgrid表格下拉搜索多选框优化—使用select下拉多选插件
重庆李四
05-20 1万+
jqgrid表格插件应该是表格插件中最强大吧，最近项目需要使用jqgrid但又要根据项目需求进行一些私人订制，还好jqgrid的源码写清晰易懂。jqgrid有个下拉搜索的功能，我们先看下官网的展示，网址：http://www.guriddo.net/demo/bootstrap/。下拉单选搜索样式还过得去可以将就，使用的html5原生的select。先简单说下这个下拉搜索的API吧colModel...
能盖住Select的Div
Panda
11-24 1696
 JK:支持民族工业,尽量少买X货aaaaaaabbbbbbbcccccccccccccccccccccccccccctest0test1test2test3Div被Select挡住，是一个比较常见的问题。有的朋友通过把div的内容放入iframe或object里来解决。可惜这样会破坏页面的结构，互动性不大好。这里采用的方法是：虽
前端布局——div盒子模型、position、float、display》》》
任天柳
11-08 1697
目录 背景和意愿 涉及到的基础知识简介 布局类型的介绍 文档流简介 position属性介绍 float属性介绍 float属性控制下的浮动布局——水槽模型 display属性介绍 div盒子模型（标准盒子模型，IE模型、弾性模型） 布局实例解析 问题1：如使得右下位置的内容div在向上拉动的过程中与顶部的导航栏保持一定的距离？ 问题2：顶部导航侧部导航的基本实现思路以及原...
css中overflow:hidden失效问题的解决方法
11-21
因为绝对定位的子元素会从内向外寻找有定位的父元素，找不到的话overflow:hidden;也会随之失效。 一探究竟 重要的事再说一遍，正如上述所言，overflow:hidden;失效的原因是：父元素想要隐藏溢出的绝对定位的子元素，...
css中position:relative和overflow:hidden之间的问题
09-25
问题在于，当父元素设置了`overflow:hidden`，而子元素设置了`position:relative`，在某些版本的IE浏览器（特别是IE6和IE7）中，`overflow:hidden`无法正确隐藏那些相对定位的子元素。这是由于这些旧版IE浏览器的...
IE overflow:hidden失效的解决方法
12-10
overflow:hidden失效 当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时，父元素的overflow:hidden属性就会失效。 我们在IE 6内发现子元素会超出父元素设定的高度，即使父元素设置了overflow:...
overflow:hidden line-height clearfix:after使用方法介绍
01-19
1.overflow:hidden的作用是隐藏溢出比如： 复制代码代码如下: <div xss=removed id=1><div id=2></div><div> 当ID=2的这个DIV高度设定的宽度超过了300px，那么超出的部分将自动被隐藏 2.line-height指的是在DIV中...
如何在React项目中使用ECharts图表库
sdasadasds的博客
11-16 9554
如果在原生的JS应用或者jQuery项目中，我们常用的方式就是直接去官网下载其核心js文件并导入我们的项目中使用，但是在React项目中，我们大可不必，由于React项目开发基于webpack做了二次封装，而webpack又是基于 Node.js的前端项目部署打包工具，总而言之，React项目开发是在nodejs环境基础上，所以可以直接利用npm包管理器将第三方工具模块下载加入到项目中，并通过import引入对应的模块到相关页面中使用，不需要关心其中的细节。1、通过极坐标双数值轴绘制爱心。
教你js生成二维码-QrCodeJS
sdasadasds的博客
09-02 8406
通过 QECode.js 可以非常方便的在web 页面中使用二维码。让我们在应用中便捷的使用，扩展了项目的适用范围。提升项目的用户体验，使我们的应用更加符合当下用户的适用习惯，增加用户的黏性。二维码又称QR Code，是一个近几年来移动设备上很流行的一种编码方式它比传统的一维码（条形码）能存更多的信息，也能表示更多的数据类型。按照一定规律排列组成的几何图形构成，它巧妙地利用构成计算机内部逻辑基础的“0”、“1”比特流的概念。人们的生活方方面面都离不开二维码，而且她也给人们带来了极大的便利。
深入了解word-break和 word-wrap的区别
sdasadasds的博客
06-13 7065
我们知道，本次内容主要是“深入了解 word-break:break-all和 word-wrap:break-word的区别”，这2个属性都是属于CSS3的属性，在现在很多文本模块用到很多，故此写了这篇文章，和大家交流学习。首先我们来了解一下word-break这个属性，它的语法如下: 它的属性值一共有3个，其中的几个属性值的含义具体解释如下：normal:表示默认值，即默认的的换行规则。 break-all:表示强行换行，意思就是允许任意非文本间(比如网址类型的等)的单词断行。 keep-all: 也表
微信小程序接入直播
sdasadasds的博客
05-24 5820
文章目录微信小程序接入直播一.小程序配置1.添加/更改服务类目2.开通实时播放/录制音视频流二.云直播服务器1.云直播申请2.云直播配置2-1添加域名2-2获取推流地址2-3获取播放地址三.组件介绍1.live-pusher2.live-player四.代码实现1.页面结构2.离线检测 微信小程序接入直播 ​ 作者：kerwin 微信小程序开发如火如荼，很多公司都构建了自己的小程序。对于一些有产品的公司， 他们对于自己的小程序有直播需求，希望通过小程序直播获得流量变现。本文章就此需求，跟大家聊聊如何在
一篇文章带你了解Nodejs
sdasadasds的博客
07-08 5663
1.什么是node.js？ node.js是一个基于Chrome v8引擎的javascript 运行环境。Node.js使用了一个事件驱动、非阻塞式 I/O的模型，使其轻量又高效。（由c＋＋语言编写的）Node.js的包管理器npm，成为世界上最大的开放源代码的生态系统。 简单说：编写高性能网络服务器的javascipt工具包（用于js开发服务端程序） 单线程、异步、事件驱动。node.js是一个Javascript运行环境(runtime)Node.js 是一个让 JavaScript 运行在服务端的开
overflow: hidden参数详解
最新发布
04-18
1. 溢出内容的隐藏：当元素的内容超出了其指定的尺寸时，设置overflow: hidden可以隐藏超出部分的内容，而不会显示在元素的边界之外。 2. 清除浮动：当元素内部包含浮动元素时，设置overflow: hidden可以触发BFC...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值