div: до/после вмешательства в другие divs?

Я использую CSS: до и: после того, как добавить пунктирную линию визуальных элементов в DIV:div: до/после вмешательства в другие divs?

enter image description here

Но это, кажется, мешая с элементами кнопки «Редактировать». (кнопка редактирования не будет реагировать на какие-либо события onClick или MouseOver или Hover, в то время как родительские div: до и: после 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: до/после вмешательства в другие divs?

ответ

Смежные вопросы