Box-shadow on absolute positioned div with no content? - html

Question

I have a DIV that I'm using as a "separator".
Requirements:
That separator should be placed on the bottom of the header.
I need that separator to span across the full viewport width.
I need to style it using box-shadow on it.
Problems:
I have an outer Layout DIV that limits everything to max-width = 500px;
My header is not fixed (it's sticky, so it only becomes fixed after some scroll). It starts as relative, so I can absolute position the separator.
I had to make the separator DIV with position: absolute and width: 100vw so make it span the full viewport with.
QUESTION
It works as intended if I use the border-bottom property. It spans the full width of the viewport (1st snippet).
But it doesn't work with box-shadow (nothing is displayed. 2nd snippet). Why? Is it possible to make it work with box-shadow in this situation?
SNIPPET: works with border-bottom
.layout {
width: 100%;
max-width: 500px;
margin: auto;
}
.header {
height: 120px;
background-color: lightblue;
position: relative;
}
.separator {
position: absolute;
width: 100vw;
height: 3px;
top: 100%;
border-bottom: 1px solid black;
/*box-shadow: 0 4px 3px -3px black;*/
left: 50%;
transform: translate(-50%, -50%);
}
.main {
height: 150px;
background-color: lightgreen;
}
<div class="layout">
<div class="header">
Header
<div class="separator"></div>
</div>
<div class="main">
Main
</div>
</div>
SNIPPET: does NOT work with box-shadow
.layout {
width: 100%;
max-width: 500px;
margin: auto;
}
.header {
height: 120px;
background-color: lightblue;
position: relative;
}
.separator {
position: absolute;
width: 100vw;
height: 3px;
top: 100%;
/*border-bottom: 1px solid black;*/
box-shadow: 0 4px 3px -3px black;
left: 50%;
transform: translate(-50%, -50%);
}
.main {
height: 150px;
background-color: lightgreen;
}
<div class="layout">
<div class="header">
Header
<div class="separator"></div>
</div>
<div class="main">
Main
</div>
</div>

Answer 1

The 5-value box-shadow shorthand you're using sets the following properties:
offset-x | offset-y | blur-radius | spread-radius | color
Your spread radius is set to -3px. This diminishes the "height" of the shadow to 0, since the height of your separator is 3px.
The shadow will display if you increase the spread radius. Try this instead:
box-shadow: 0 4px 3px 0px black

Answer 2

Somehow the box-shadow property in that situation need some minimal height render a shadow. I've managed to find a solution. See snippet below.
.layout {
width: 100%;
max-width: 500px;
margin: auto;
}
.header {
height: 120px;
background-color: lightblue;
position: relative;
}
.separator {
position: absolute;
width: 100vw;
height: 10%;
top: 95%;
/*border-bottom: 1px solid black;*/
box-shadow: 0 4px 3px -3px black;
left: 50%;
transform: translate(-50%, -50%);
}
.main {
height: 150px;
background-color: lightgreen;
}
<div class="layout">
<div class="header">
Header
<div class="separator"></div>
</div>
<div class="main">
Main
</div>
</div>