CODEWITHSUNDEEP
htmlcsslayout
Juergen Schmidt
Juergen Schmidt

Reputation: 11

Inner div should be displayed in front of outer div

I have the following code and would like the inner div with the class: escaping-container to be displayed in front of the outer div with the class container.

The inner div has bigger height setting than the outer div. So a part of it is cut off.

Also the part that is being cut of by outer div must be displayed.

<style type="text/css">

div.container{
  width: 100px;
  height:100px;
  overflow-x:scroll;
  overflow-y:hidden;
  position:relative;
  z-index:1;
}

div.escaping-container{
  width:50px;
  height:150px;
  position:relative;
  z-index:10;
  background-color:red;
}

</style>

<div class ="container">
  <div class="escaping-container"></div>
</div>

I tried to get this done by setting the z-index, but it doesn't work. Any help will be appreciated.

Upvotes: 1

Views: 862

Answers (3)

sandeep
sandeep

Reputation: 92803

if the overflow settings are necessary try this http://jsfiddle.net/sandeep/59nGZ/

css:

div.container{
  width: 100px;
  height:100px;
  overflow-x:scroll;
  overflow-y:hidden;
    border:1px solid red;
}

div.escaping-container{
  width:50px;
  height:150px;
  position:absolute;
  background-color:red;
}

Upvotes: 2

anroesti
anroesti

Reputation: 11383

You won't be able to position the inner <div> outside the parent with overflow set to scroll, hidden or auto. To be able to do so you either need to change your markup, or remove the overflow-properties from your CSS.

Upvotes: 0

SneakAttaack
SneakAttaack

Reputation: 194

Im afraid your question is a contradiction. If you want the inner div to be visible, you must remove the overflow-x and overflow-y css statements.

Upvotes: 2

Related Questions