div：在干擾其他div之前/之後？

我使用CSS：前和：後虛線視覺元素添加到一個div：div：在干擾其他div之前/之後？

enter image description here

但似乎與「編輯」按鈕元素干擾。（編輯按鈕不會響應任何onClick或MouseOver或懸停事件，而父div：before和：在CSS之後）任何想法如何呈現按鈕元素'之前：之前和之後：元素，除了Z指數？

CSS：

.window_header{ 
    width:600px; 
    height:42px; 
    background: #333 url("../img/bg-2.png") repeat; 
    -webkit-border-top-left-radius: 8px; 
    -webkit-border-top-right-radius: 8px; 
    border-bottom:1px dotted #666; 
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3),inset 0 -4px 5px rgba(0, 0, 0, 0.2),inset 1px 0px 1px rgba(0, 0, 0, 0.7),inset -1px 0px 1px rgba(0, 0, 0, 0.7),inset 0 -2px 1px rgba(0, 0, 0, 0.5),inset 0 2px 6px rgba(255, 255, 255, 0.15),inset -2px 0 6px rgba(255, 255, 255, 0.15),inset 2px 0 6px rgba(255, 255, 255, 0.15); 
} 

.window_header:before, 
.window_header:after{ 
    content: ""; 
    position: absolute; 
    top: 0; 
    right: 0px; 
    bottom: 562px; 
    left: 0px; 
    z-index:1; 
    border-bottom: 1px dashed #666; 
    background:-webkit-gradient(radial, center center, 0, center center, 260, from(rgba(255, 255, 255, 0.05)), to(rgba(255, 255, 255, 0))); 
} 

.button_edit{ 
    margin: 8px 8px 8px 8px; 
    border-radius:6px; 
    width:70px; 
    font-size: 9pt; 
    font-weight:bold; 
    cursor:pointer; 
    font-family: Helvetica, sans-serif; 
    text-shadow: 0px -1px 1px rgba(0,0,0,0.5); 
    border: 1px solid rgba(0, 0, 0, 0.5); 
    border-top-color: rgba(0, 0, 0, 0.496094); 
    -webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.2),0 -1px 1px rgba(0, 0, 0, 0.3); 
    z-index:100; 
} 

.fl_right{ 
    float:right; 
}

HTML：

<div class="window_header"> 
    <div class="button_edit fl_right" id="button_edit_site"> Edit </div> 
</div>

來源

2012-06-25 Ben Bernards

請張貼所有相關的CSS代碼（'.pattern_dmd'，'.shadow'，'.fl_right'），因爲我試着用[的jsfiddle]（ http://jsfiddle.net/TsLva/），似乎正常工作。 –

@ Fong-WanChau，代碼更新（謝謝！） –

我想你忘了添加position: relative到.button_edit。 z-index需要relative/absolute工作：

http://jsfiddle.net/CB2BE/1/

.button_edit{ 
    position: relative; 
    z-index:100; 
}

來源

2012-06-25 18:18:54 biziclop

Huzzah！謝謝你，先生。 –

@BenBernards嗯，我認爲那裏只有'.window_header'需要'position：relative'，所有其他元素只是讓它自然，他們會很好。（我添加了樣式到按鈕，因爲本沒有發佈它...）參見演示：http：//jsfiddle.net/TsLva/3/ –

div：在干擾其他div之前/之後？

回答

相關問題