Q:

Avoid filter blur causing bluriness on close DIV element

I have 2 divs close to each other and added a new filter: blur(5px) to the second one. What I wanted is to make only the content appear blurred but since blurring everything the 'bluriness' affects the first div which you can see in this example:
https://jsfiddle.net/90vozg7g/
CSS example:
.one{
  background-color: #FFF;
  color: #000;
  height: 40px;
  border-bottom: 1px solid #000;
}

.two{
  background-color: red;
  color: #FFF;
  height: 40px;  
  -webkit-filter: blur(5px);
  filter: blur(5px);
}

On top of the black border we still see a bit of the red 'blurry' effect. 
I want the first div to not be affected by this and always be 'on top' of the blur effect. I tried absolute and fixed positioning, z-index manipulation, etc and nothing seems to work (tested on chrome win).
Yes, I know I can add some padding/margins and avoid this but in my case that is not possible.
Anyone knows a way to avoid the first div being affected by the blur?

A:

Using relative positioning for both divs along with z-index should get you what you're looking for... https://jsfiddle.net/90vozg7g/1/
.one{
    background-color: #FFF;
    color: #000;
    height: 40px;
    border-bottom: 1px solid #000;
    position: relative;
    z-index: 2;
}

.two{
    background-color: red;
    color: #FFF;
    height: 40px;  
    -webkit-filter: blur(5px);
    filter: blur(5px);
    position: relative;
    z-index: 1;
}

And if you don't want the overlapping text, just slap in: 
overflow: hidden;

