Html 如何在隐藏溢出的Div上放置按钮？_Html_Css

Html 如何在隐藏溢出的Div上放置按钮？

html css

Html 如何在隐藏溢出的Div上放置按钮？,html,css,Html,Css,我有一个盒子，想把按钮放在盒子上我尝试了z索引、网格内容等，但按钮没有显示出来，按钮必须在框内 Html: #内容{ 宽度：300px；高度：100px；溢出：隐藏；位置：相对位置；背景：橙色； } 输入[type='button']{ 位置：绝对位置；右：-30px； } 将上下属性设置为隐藏，您只有一个选项：对按钮使用位置：固定，并应用相对于窗口的定位。请注意，您需要重新调整滚动条上的位置 #内容{ 宽度：300px；高度：100px；溢出：隐藏；位置：相对位置；背景

我有一个盒子，想把按钮放在盒子上

我尝试了z索引、网格内容等，但按钮没有显示出来，按钮必须在框内

Html:

#内容{
宽度：300px；
高度：100px；
溢出：隐藏；
位置：相对位置；
背景：橙色；
}
输入[type='button']{
位置：绝对位置；
右：-30px；
}

将

上下

属性设置为

隐藏

，您只有一个选项：对按钮使用

位置：固定

，并应用相对于窗口的定位。请注意，您需要重新调整滚动条上的位置

#内容{
宽度：300px；
高度：100px；
溢出：隐藏；
位置：相对位置；
背景：橙色；
}
输入[type='button']{
位置：固定；
右：290px；
}

问题在于，您的按钮位置与父级内容相对，因此为什么不在外部显示以解决此问题，您需要删除

溢出：隐藏或删除上的位置：相对\content

或者您可以将您的div包装到另一个div中，如下所示：

#内容{
宽度：300px；
高度：100px；
溢出：隐藏；
背景：橙色；
}
输入[type='button']{
位置：绝对位置；
右：-30px；
}
主母公司{
位置：相对位置；
宽度：适合的内容；
}
那个右边：-30px
正在把按钮放在盒子外面。尝试一下：
<html>

<head>
    <style>
        #content {
            width: 300px;
            height: 100px;
            overflow: hidden;
            position: relative;
            background: orange;
        }

        input[type='button'] {
            position: absolute;
            right: 30;
        }
    </style>
</head>

<body>
    <div id="content">
        <input type="button" value="test">
    </div>
</body>

</html>


#内容{
宽度：300px；
高度：100px；
溢出：隐藏；
位置：相对位置；
背景：橙色；
}
输入[type='button']{
位置：绝对位置；
右：30；
}
您可以这样尝试

#内容{
宽度：300px；
高度：100px；
位置：相对位置；
}
#盒子{
宽度：300px；
高度：100px；
溢出：隐藏；
位置：相对位置；
背景：橙色；
}
输入[type='button']{
位置：绝对位置；
右：-30px；
z指数：1000；
浮动：对；
顶部：20px；
}

您能详细说明一下吗？您只需运行代码段，就可以看到问题所在按钮仍在框内，不要翻过框它必须隐藏。@RampageProgramming您的内容div是隐藏的，但mainparent div不是！这就是我一直在寻找的答案。非常感谢。它必须在盒子上。