Overlying Divs with position absolute - css

Question

I have placed one <div> over another one with position absolute and with 10px padding to the left margin (this is because I want to show a shadow).
The problem is that the content of the base <div> is showed on the left of the header <div>, how to avoid this? If I use border-left instead of padding-left the shadow is not showed.
#container {
background-color: green;
display: flex;
}
.item {
background-color: white;
border: 1px solid black;
flex-grow: 0;
}
.bigContent{
height: 1000px;
width: 1000px;
}
.scroll{
overflow: auto;
height: 300px;
width: 500px;
}
.header{
height: 280px;
width: 200px;
position: absolute;
z-index: 1;
padding-left:10px;
overflow:hidden;
display: inline;
border: solid 1px;
}
.headerContent{
background: lightgrey;
height: 280px;
width: 200px;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
<div id="container">
<div id="header" class="header">
<div class="headerContent">
<div class="shadow">
<table width="500px">
<tr><td>Header</td></tr>
</table>
</div>
</div>
</div>
<div class="item scroll">
<div class="bigContent">
<table width="500px">
<tr><td>Some content</td><td>Some content</td><td>Some content</td><td>Some content</td><td>Some content</td><td>Some content</td></tr>
</table>
</div>
</div>
</div>

Answer 1

The problem is that the content of the base <div> is showed on the
left of the header <div>, how to avoid this?
You have correctly added padding-left on the header div to allow for the shadow, and the header div is indeed on top of the content. However, the header div has a transparent background by default.
So in order to hide the content below - you could simply add a white background to the header div.
.header {
...
background-color: white;
}
#container {
background-color: green;
display: flex;
}
.item {
background-color: white;
border: 1px solid black;
flex-grow: 0;
}
.bigContent{
height: 1000px;
width: 1000px;
}
.scroll{
overflow: auto;
height: 300px;
width: 500px;
}
.header{
height: 280px;
width: 200px;
position: absolute;
z-index: 1;
padding-left:10px;
overflow:hidden;
display: inline;
border: solid 1px;
background-color: white;
}
.headerContent{
background: lightgrey;
height: 280px;
width: 200px;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
<div id="container">
<div id="header" class="header">
<div class="headerContent">
<div class="shadow">
<table width="500px">
<tr><td>Header</td></tr>
</table>
</div>
</div>
</div>
<div class="item scroll">
<div class="bigContent">
<table width="500px">
<tr><td>Some content</td><td>Some content</td><td>Some content</td><td>Some content</td><td>Some content</td><td>Some content</td></tr>
</table>
</div>
</div>
</div>