设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › 关于overflow和position的联动问题
返回列表 发新帖
查看: 645|回复: 1

[已解决]关于overflow和position的联动问题

[复制链接]
wlHy
发表于 2023-3-7 16:48:07 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
目前自学html中，写了一个二级菜单的案例，遇到了一些难以解释的问题。
首先给box设置了overflow: scroll。
当没有给item和item>ul设置position定位时，鼠标滑动到二级菜单可以通过red背景色看到是box被撑开了，且overflow: scroll没有生效。见代码1。
但是当设置定位后，鼠标滑动到二级菜单可以看到overflow: scroll又生效了。见代码2
请教各位大佬，这是什么原因导致的呢？

代码1
  1. <!DOCTYPE html>
  2. <html lang="en">

  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  14.         .box{
  15.             width: 400px;
  16.             margin: 0 auto;
  17.             background-color: red;
  18.             overflow: scroll;
  19.         }
  20.         ul{
  21.             list-style: none;
  22.         }
  23.         .box .item{
  24.             float: left;
  25.             width: 148px;
  26.             line-height: 40px;
  27.             text-align: center;
  28.             border: 1px solid blue;
  29.             background: blue;
  30.             color: white;
  31.         }

  33.         .item{
  34.             /* position: relative; */
  35.         }
  36.         
  37.         .item ul{
  38.             display: none;
  39.             background: white;
  40.             color: black;
  41.             /* position: absolute;
  42.             left: 0;
  43.             top: 40px;
  44.             width: 148px; */
  45.         }
  46.         .item:hover {
  47.             background: lightblue;
  48.         }
  49.         .item:hover ul{
  50.             display: block;
  51.         }

  53.         .item li:hover{
  54.             color: bisque;
  55.         }
  56.         .content{
  57.             height: 100px;
  58.             background: yellow;
  59.         }
  60.     </style>
  61. </head>

  63. <body>
  64.     <ul class="box">
  65.         <li class="item">视频教程
  66.             <ul>
  67.                 <li>全部视频教程</li>
  68.                 <li>HTML5视频教程</li>
  69.                 <li>JAVA视频教程</li>
  70.                 <li>PYTHON视频教程</li>
  71.             </ul>
  72.         </li>
  73.         <li class="item">认证考试
  74.             <ul>
  75.                 <li>pmp</li>
  76.                 <li>红帽</li>
  77.             </ul>
  78.         </li>
  79.     </ul>


  82. </body>

  84. </html>
复制代码


代码2
  1. <!DOCTYPE html>
  2. <html lang="en">

  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  14.         .box{
  15.             width: 400px;
  16.             margin: 0 auto;
  17.             background-color: red;
  18.             overflow: scroll;
  19.         }
  20.         ul{
  21.             list-style: none;
  22.         }
  23.         .box .item{
  24.             float: left;
  25.             width: 148px;
  26.             line-height: 40px;
  27.             text-align: center;
  28.             border: 1px solid blue;
  29.             background: blue;
  30.             color: white;
  31.         }

  33.         .item{
  34.             position: relative;
  35.         }
  36.         
  37.         .item ul{
  38.             display: none;
  39.             background: white;
  40.             color: black;
  41.             position: absolute;
  42.             left: 0;
  43.             top: 40px;
  44.             width: 148px;
  45.         }
  46.         .item:hover {
  47.             background: lightblue;
  48.         }
  49.         .item:hover ul{
  50.             display: block;
  51.         }

  53.         .item li:hover{
  54.             color: bisque;
  55.         }
  56.         .content{
  57.             height: 100px;
  58.             background: yellow;
  59.         }
  60.     </style>
  61. </head>

  63. <body>
  64.     <ul class="box">
  65.         <li class="item">视频教程
  66.             <ul>
  67.                 <li>全部视频教程</li>
  68.                 <li>HTML5视频教程</li>
  69.                 <li>JAVA视频教程</li>
  70.                 <li>PYTHON视频教程</li>
  71.             </ul>
  72.         </li>
  73.         <li class="item">认证考试
  74.             <ul>
  75.                 <li>pmp</li>
  76.                 <li>红帽</li>
  77.             </ul>
  78.         </li>
  79.     </ul>


  82. </body>

  84. </html>
复制代码

最佳答案
月排行榜 / 总排行榜
TKXZ
2023-4-7 11:59:39
因为你为.item设置了float：left，所以此时的.item是脱离了文档流(也就是说.item悬浮在box的上面)当设置定位后产生了BFC，BFC可以有清除浮动的功能，所以下拉菜单就显示在box看不见的区域了(应该是这个意思吧？？？)
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

TKXZ
发表于 2023-4-7 11:59:39 | 显示全部楼层    本楼为最佳答案   
因为你为.item设置了float：left，所以此时的.item是脱离了文档流(也就是说.item悬浮在box的上面)当设置定位后产生了BFC，BFC可以有清除浮动的功能，所以下拉菜单就显示在box看不见的区域了(应该是这个意思吧？？？)
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-4-28 02:15

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表