2

CSS :before と :after を使用して、点線の視覚要素を div に追加しています。

ここに画像の説明を入力

しかし、「編集」ボタン要素に干渉しているようです。(編集ボタンは、親 div の :before および :after CSS が存在する間、onClick または MouseOver または Hover イベントに応答しません) :before および :after 要素の「前」にボタン要素をレンダリングする方法について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>
4

1 に答える 1

0

position: relativeに追加するのを忘れたと思います.button_edit。/がz-index必要です:relativeabsolute

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

.button_edit{
    position: relative;
    z-index:100;
}
于 2012-06-25T18:18:54.843 に答える