Positioning element outside of scrolling container gets cut off - html

Question

I have a button in a sidebar div which I want to position so half of it sticks out of the container. The problem is because the sidebar needs its own scrollbar this makes the button get cut off. Example here: http://jsfiddle.net/z5dy7t4x/19/
Why does the button get cut off when adding overflow-y: scroll; to the container?
Is it possible to show the button without modifying the HTML?

Answer 1

Couldn't figure out a CSS only solution. Solved it by adding an inner container and putting the scroll on that. Working example: http://jsfiddle.net/37ow2pqy/2/
<div class="sidebar">
<button class="close">
CLOSE
</button>
<div class="sidebar-content">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatum enim nulla incidunt illo, at consequuntur eaque distinctio, dolorem, nemo quam ipsum accusantium vitae! Nam rem, dolor quod quas nobis, dolorem veniam molestias laboriosam blanditiis autem sequi tenetur, dolore distinctio beatae voluptates doloremque excepturi officia ratione quisquam. Eveniet aperiam rerum iusto, odit excepturi saepe, ullam et quo sint, delectus vel velit repellat quibusdam aut earum architecto corrupti? Dignissimos ullam sit autem numquam nihil adipisci dicta non officiis, tenetur excepturi hic ex saepe corporis animi asperiores nesciunt quo, voluptate libero sapiente. Totam, modi quaerat! Exercitationem fuga autem magnam id repudiandae doloremque voluptatem?
</div>
</div>
.sidebar{
width: 300px;
border: 1px solid #000;
position: absolute;
right: 0;
}
.close {
position: absolute;
top: 20px;
left: -25px;
}
.sidebar-content {
overflow-y: scroll;
height: 300px;
}

Answer 2

You added position absolute for the button, that's why your button is hidden
#parent{
position: absolute;
right: 0;
}
#close {
background-color: red;
color: white;
position: absolute;
left: -50px;
}
#child{
border: solid 1px black;
width: 200px;
height: 200px;
overflow-y: scroll;
margin-left: auto;
margin-right: auto;
}
<div id=parent>
<button id=close>
abololute child
</button>
<div id=child>
This is the child
</div>
</div>

Answer 3

Error to be addressed first:
In your CSS, you have position: relative;, and also position: absolute;, the latter being the one I believe you are going for, you need to remove the position: relative;.
Your First Question
Why does the button get cut off when adding overflow-y: scroll; to the container?
Because, by default, overflow is set to overflow: visible;, so you are changing that (overflow-y of course, being part of overflow).
Your Second Question
Is it possible to show the button without modifying the HTML?
Well, if you want the button halfway outside the <div>'s box, I would guess that you don't want the button to scroll with the content. If this is the case, then you will need to put the <button>...</button> outside of the <div> that the content (Lorem ipsum, etc.) is in (and change its positioning).
(Another way is to just use position: fixed; instead, but I seriously doubt that that's what you want)
Here it is:
.box{
width: 300px;
border: 1px solid Black;
position: absolute;
right: 0;
}
#close {
position: absolute;
top: 20px;
left: -31px;
}
.content {
overflow-y: scroll;
height: 250px;
}
<div class="box">
<button id="close">
CLOSE
</button>
<div class="content">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatum enim nulla incidunt illo, at consequuntur eaque distinctio, dolorem, nemo quam ipsum accusantium vitae! Nam rem, dolor quod quas nobis, dolorem veniam molestias laboriosam blanditiis autem sequi tenetur, dolore distinctio beatae voluptates doloremque excepturi officia ratione quisquam. Eveniet aperiam rerum iusto, odit excepturi saepe, ullam et quo sint, delectus vel velit repellat quibusdam aut earum architecto corrupti? Dignissimos ullam sit autem numquam nihil adipisci dicta non officiis, tenetur excepturi hic ex saepe corporis animi asperiores nesciunt quo, voluptate libero sapiente. Totam, modi quaerat! Exercitationem fuga autem magnam id repudiandae doloremque voluptatem?
</div>
</div>