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/

1. Why does the button get cut off when adding overflow-y: scroll; to the container?
2. Is it possible to show the button without modifying the HTML?

CodePudding user response：

You added position absolute for the button, that's why your button is hidden

  
#parent{
position: relative;
float: right;
}
#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>

CodePudding user response：

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/z5dy7t4x/22/

<div >
  <button >
    CLOSE
   </button>
  <div >
     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: relative;
  position: absolute;
  right: 0;
}

.close {
  position: absolute;
  top: 20px;
  left: -25px;
}

.sidebar-content {
  overflow-y: scroll;
  height: 300px;
}