Html 是什么导致我的div被隐藏？_Html_Css_Scrollbar_Overflow

Html 是什么导致我的div被隐藏？

html css

Html 是什么导致我的div被隐藏？,html,css,scrollbar,overflow,Html,Css,Scrollbar,Overflow,我正在写一个页面，由一个固定大小和大量内容组成。这就是为什么具有滚动条（正常行为）。在滚动条之后，我想创建一个元素，它将允许更改其宽度（使大小可调整）。不幸的是，此元素（“resizer”）未显示。为什么它是隐藏的？下面是与示例的链接- #包装纸{ 浮动：左；高度：200px；位置：相对位置；溢出：隐藏；垫底：1px；右侧填充：1px；宽度：500px； z指数：200； } #增塑剂 { 边框：1px纯红；光标：e-resize；身高：100%；位置：绝对位置；右：-1

我正在写一个页面，由一个固定大小和大量内容组成。这就是为什么具有滚动条（正常行为）。在滚动条之后，我想创建一个元素，它将允许更改其宽度（使大小可调整）。不幸的是，此元素（“resizer”）未显示。为什么它是隐藏的？下面是与示例的链接-


#包装纸{
浮动：左；
高度：200px；
位置：相对位置；
溢出：隐藏；
垫底：1px；
右侧填充：1px；
宽度：500px；
z指数：200；
}
#增塑剂
{
边框：1px纯红；
光标：e-resize；
身高：100%；
位置：绝对位置；
右：-10px；
排名：0；
宽度：10px；
z指数：1000；
} 
#内容
{
宽度：100%；
身高：100%；
溢出：自动；
位置：相对位置；
}
……这里有很多文字。。。。

在

#包装器

中有

大小调整器

元素，该元素具有

溢出：隐藏

和

位置：相对

。您已经将您的

#resizer

相对于

#wrapper

进行了绝对定位，距离右侧-10像素（即它的右侧在wrapper元素之外）。

#wrapper

的

overflow:hidden

阻止它在其边界之外显示。

不知道您的情况，但我可以看到它，并且鼠标光标/指针也发生了变化。您可能会在一个页面上注意到它。

#wrapper

上的

overflow:hidden

导致它被隐藏。。这就是你的意思吗？或者其他一些原因？对食梦者来说：你是对的，但不是10像素宽，而是只显示红色边框。当你们将鼠标悬停在这个边界上时，你们会看到光标改变了它的视图，这是正常的行为，但我只需要那个“大小调整器”更宽一些！cimmanon，你是100%正确的。你是正确的，因为cimmanon在8分钟前也是正确的。遗憾的是，这样一件显而易见的事情并没有出现在我的脑海中……我掩盖了那个评论，否则我会让他把它作为一个答案发布出来。我的错。

<html>
<head>
  <style type="text/css">
   #wrapper {
    float: left;
    height: 200px;
    position:relative;
    overflow: hidden;
    padding-bottom: 1px;
    padding-right: 1px;
    width: 500px;
    z-index: 200;
   }
   #resizer 
   {
    border:1px solid red;
    cursor: e-resize;
    height: 100%;
    position: absolute;
    right: -10px;
    top: 0;
    width: 10px;
    z-index: 1000;
   } 
   #content
   {
     width:100%; 
     height:100%;
     overflow:auto;
     position:relative;
   }
  </style>
</head>
<body>
<div id="wrapper" > 
<div id="content"> 
.....Lots of text here....
</div>
<div id="resizer"></div>
</div>  
</body>
</html>