避免過濾器模糊導致模糊關閉DIV元素

Question

我有2個div彼此接近，並添加一個新的過濾器：blur（5px）到第二個。我想是僅使內容變得模糊，但由於模糊的一切「bluriness」影響，你可以在這個例子中看到的第一個div：

https://jsfiddle.net/90vozg7g/

CSS例子：

.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); 
} 

在黑色邊框的頂部，我們仍然看到了一點紅色的「模糊」效果。

我希望第一個div不受此影響，並始終處於模糊效果的「頂部」。我嘗試了絕對的和固定的定位，z-index操作等等，沒有任何東西可以工作（在chrome win上測試）。

是的，我知道我可以添加一些填充/邊距並避免這種情況，但在我的情況下這是不可能的。

任何人都知道避免第一個div受模糊影響的方法嗎？

Answer 1

使用相對定位兩者的div用z-index沿着應該得到你在找什麼... 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; 
} 

如果你不想重疊的文字，只是耳光：

overflow: hidden;