CODEWITHSUNDEEP
htmlcss
Rampage Programming
Rampage Programming

Reputation: 116

How to put a button over a Div with overflow hidden?

I have a box and want to put the button over the box.

I have tried with z-index, grid-content, etc and the button is not showing over, the button has to be inside the box.

Html: 

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

input[type='button'] {
    position: absolute;
    right: -30px;
}
<div id="content">
    <input type="button" value="Click me!" />
</div>

I expected the button go over the box and the button has to be inside the box.

Upvotes: 5

Views: 7648

Answers (4)

goregasm
goregasm

Reputation: 90

you can try like this.

#content {
width: 300px;
    height: 100px;
        position: relative;
    }
#box{
width: 300px;
    height: 100px;
    overflow: hidden;
    position: relative;
    background: orange;
}
input[type='button']{
position: absolute;
    right:-30px;
    z-index:1000;
    float: right;
    top: 20px;
}
<div id="content">
  <div id="box">
  </div>
  <input type="button" value="Click me!" />
</div>

Upvotes: 5

Michael Snyder
Michael Snyder

Reputation: 21

That right: -30px is putting the button outside the box. Give this a try:

<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>

Upvotes: 0

adel
adel

Reputation: 3507

the problem is your button position is relative to the parent #content that why is not showing outside to solve it you need to remove overflow:hidden or remove position:relative on #content

or you can wrap your div inside another div like this:

#content{
width: 300px;
    height: 100px;
    overflow: hidden;
    background: orange;
}
input[type='button']{
position: absolute;
    right:-30px;
}
.mainparent{
      position: relative;
  width:fit-content;
}
<div class="mainparent">
<div id="content">
<input type="button" value="Click me!" />
</div>
</div>
the .mainparent div will take same height and width as #content div but with no overflow:hiiden

Upvotes: 1

Dima Vishnyakov
Dima Vishnyakov

Reputation: 1542

With overlow property set to hidden, you have only one option: use position: fixed for the button and apply positioning relative to the window. Note that you'll need to readjust position on scroll.

#content{
width: 300px;
    height: 100px;
    overflow: hidden;
    position: relative;
    background: orange;
}
input[type='button']{
    position: fixed;
    right:290px;
}
<div id="content">

<input type="button" value="Click me!" />
</div>

Upvotes: 0

Related Questions