本文章來(lái)給各位同學(xué)介紹關(guān)于在css pointer-events絕對定位層遮擋的問(wèn)題解決辦法，各位同學(xué)不防進(jìn)入參考。
在沒(méi)有背景和圖片填充的情況下，火狐和Chrome下不能直接點(diǎn)擊絕對定位層下面的元素（比如鏈接），下面的鏈接被上面的絕對定位層擋住了。在IE里面是可以直接點(diǎn)擊絕對定位層下面的鏈接。
對于這種問(wèn)題需要用到一個(gè)css3的屬性，可以通過(guò)給絕對定位的層多加一個(gè)樣式 pointer-events:none; 以后， 絕對定位層下的元素就可以點(diǎn)擊了。
光給絕對定位的層添加pointer-events:none; 的樣式是不夠的，你可以發(fā)現所有在此層里的元素，都不能點(diǎn)擊了，就連鏈接和按鈕也同樣不起作用，所以我們需要給絕對定位層中的其他非空的元素把樣式再返回。
給里面的元素重新設置為 pointer-events:auto，只給需要操作的元素區域設置即可。
查看演示頁(yè)面
pointer-events屬性有很多值：
pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit
但是對于瀏覽器來(lái)說(shuō)，只有auto和non兩個(gè)值可用，其它的幾個(gè)是針對SVG的(本身這個(gè)屬性就來(lái)自于SVG技術(shù))。
下面介紹一下pointer-events這兩個(gè)屬性值詳細描述
auto——效果和沒(méi)有定義pointer-events屬性相同，鼠標不會(huì )穿透當前層。在SVG中，該值和visiblePainted的效果相同。
none——元素不再是鼠標事件的目標，鼠標不再監聽(tīng)當前層而去監聽(tīng)下面的層中的元素。但是如果它的子元素設置了pointer-events為其它值，比如auto，鼠標還是會(huì )監聽(tīng)這個(gè)子元素的。
其它屬性值為SVG專(zhuān)用，這里不再多介紹了。
對于瀏覽器兼容的問(wèn)題：Firefox 3.6+和chrome 2.0+ 以及safari 4.0+都支持這個(gè)CSS3屬性。
例子
代碼如下復制代碼
<script src="/js/jquery-1.7.1.min.js" language="javascript"></script>
<script language="javascript">
$(document).ready(function(){
$('textarea').each(function(){
$(this).height($(this)[0].scrollHeight);
});
})
</script>
<style>
* {
padding:0;
margin:0;
}
h1 {
font-size:20px;
margin-top:15px;
border-bottom:1px dotted #ccc;
display:table;
}
textarea {
border:1px solid #ccc;
width:100%;
}
dt {
font-weight:bold;
}
#content {
width:80%;
margin:0 auto;
}
#nav {
position:fixed;
right:5px;
top:5px;
background:#000;
opacity:0.5;
filter:alpha(opacity=50);
padding:15px;
color:#fff;
}
#nav li {
list-style-type:none;
}
#nav li a {
color:#fff;
text-decoration:none;
}
#nav li a:hover {
text-decoration:underline;
}
.box {
width:80px;
height:80px;
display:block;
background-color: #D0D0D0;
margin:10px 5px;
}
#rgba {
position:relative;
height:150px;
}
#rgba .box {
position:absolute;
left:0;
top:0;
}
/******************************************************************************************/
.box_round {
-moz-border-radius: 10px; /* FF1+ */
-webkit-border-radius: 10px; /* Saf3+, Chrome */
border-radius: 10px; /* Opera 10.5, IE 9 */
}
.box_shadow {
border:1px solid #999;
-moz-box-shadow: 10px 10px 4px #666; /* FF3.5+ */
-webkit-box-shadow: 10px 10px 4px #666; /* Saf3.0+, Chrome */
box-shadow: 10px 10px 4px #666; /* Opera 10.5, IE 9.0 */
filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=10px, OffY=10px, Color='#666'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=10px, OffY=10px, Color='#666')"; /* IE8 */
}
.box_gradient {
background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
background-image: -webkit-gradient(linear,left top, left bottom, color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999', GradientType='0'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999',GradientType='0')"; /* IE8 */
}
#rgba .box_rgba {
left:50px;
top:50px;
background-color:#03F;
opacity:0.5;
filter:alpha(opacity=50);
}
.box_rotate {
-moz-transform: rotate(7.5deg); /* FF3.5+ */
-o-transform: rotate(7.5deg); /* Opera 10.5 */
-webkit-transform: rotate(7.5deg); /* Saf3.1+, Chrome */
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9914,M12=-0.1305,M21=0.1305,M22=0.9914,SizingMethod='auto expand');
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9914,M12=-0.1305,M21=0.1305,M22=0.9914,SizingMethod='auto expand')"; /* IE8 */
}
</style>
</head>
<body>
<div id="content">
<div id="nav">
<ul>
<li><a href="#rounded">圓角的css</a></li>
<li><a href="#shadow">盒裝陰影的css </a></li>
<li><a href="#gradient">線(xiàn)性漸變的css</a></li>
<li><a href="#opacity">透明的css</a></li>
<li><a href="#rotation">旋轉的css</a></li>
<li><a href="#font-face">服務(wù)器端字體的css</a></li>
</ul>
</div>
<h1 id="rounded">圓角的css (<strong>Rounded Corner</strong>)</h1>
<div>
<div class="box box_round"></div>
</div>
<textarea> /* CSS3 */
.box_round {
-moz-border-radius: 30px; /* FF1+ */
-webkit-border-radius: 30px; /* Saf3+, Chrome */
border-radius: 30px; /* Opera 10.5, IE 9 */
}
</textarea>
<h1 id="shadow">盒裝陰影的css (<strong>Box Shadow</strong>)</h1>
<div>
<div class="box box_shadow"></div>
<div class="">
<p>-moz-box-shadow、-webkit-box-shadow和box-shadow的設置是一樣的，都有4個(gè)參數，含義分別為：x軸偏移值、y軸偏移值、陰影的模糊度、以及陰影顏色。</p>
<p>IE 6~8使用其獨有的濾鏡，需要設置三個(gè)參數：offX（X軸偏移值）、offY（Y軸偏移值）、Color（陰影顏色）。</p>
</div>
</div>
<textarea> /* CSS3 */
.box_shadow {
-moz-box-shadow: 3px 3px 4px #333333; /* FF3.5+ */
-webkit-box-shadow: 3px 3px 4px #33333; /* Saf3.0+, Chrome */
box-shadow: 3px 3px 4px #33333; /* Opera 10.5, IE 9.0 */
filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=3px, OffY=3px, Color='#333333'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=3px, OffY=3px, Color='#333333')"; /* IE8 */
}
</textarea>
<h1 id="gradient">線(xiàn)性漸變的css (<strong>Gradient</strong>)</h1>
<div>
<div class="box box_gradient"></div>
<div>
<dl>
<dt>-moz-linear-gradient</dt>
<dd>-moz-linear-gradient有三個(gè)參數。第一個(gè)參數表示線(xiàn)性漸變的方向，top是從上到下、left是從左到右，如果定義成left top，那就是從左上角到右下角。第二個(gè)和第三個(gè)參數分別是起點(diǎn)顏色和終點(diǎn)顏色。你還可以在它們之間插入更多的參數，表示多種顏色的漸變。</dd>
</dl>
<dl>
<dt>-webkit-gradient</dt>
<dd>-webkit-gradient是webkit引擎對漸變的實(shí)現，一共有五個(gè)參數。第一個(gè)參數表示漸變類(lèi)型（type），可以是linear（線(xiàn)性漸變）或者radial（輻射漸變）。第二個(gè)參數和第三個(gè)參數，都是一對值，分別表示漸變起點(diǎn)和終點(diǎn)。這對值可以用坐標形式表示，也可以用關(guān)鍵值表示，比如left top（左上角）和left bottom（左下角）。第四個(gè)和第五個(gè)參數，分別是兩個(gè)color-stop函數。color-stop函數接受兩個(gè)參數，第一個(gè)表示漸變的位置，0為起點(diǎn)，0.5為中點(diǎn)，1為結束點(diǎn)；第二個(gè)表示該點(diǎn)的顏色。</dd>
</dl>
<dl>
<dt>DXImageTransform.Microsoft.gradient</dt>
<dd>IE依靠濾鏡實(shí)現漸變。startColorstr表示起點(diǎn)的顏色，endColorstr表示終點(diǎn)顏色。GradientType表示漸變類(lèi)型，0為缺省值，表示垂直漸變，1表示水平漸變。</dd>
</dl>
</div>
</div>
<textarea> /* CSS3 */
.box_rgba {
background-color: #B4B490;
background:transparent;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#99B4B490',endColorstr='#99B4B490'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#99B4B490',endColorstr='#99B4B490')"; /* IE8 */
zoom: 1;
background-color: rgba(180, 180, 144, 0.6); /* FF3+, Saf3+, Opera 10.10+, Chrome */
}
</textarea>
<h1 id="opacity">透明的css (<strong>Opacity</strong>)</h1>
<div id="rgba">
<div class="box"></div>
<div class="box box_rgba"></div>
</div>
<textarea> /* CSS3 */
.box_gradient {
opacity:0.5;
filter:alpha(opacity=50);
}
</textarea>
<h1 id="rotation">旋轉的css (<strong>rotation</strong>)</h1>
<div>
<div class="box box_rotate"></div>
<div>
<p>除了IE以外，其他瀏覽器都是用rotate函數，實(shí)現某個(gè)對象的旋轉。比如rotate(7.5deg)就表示順時(shí)針旋轉7.5度（degree）。</p>
<p>IE則需要用到一個(gè)復雜的濾鏡DXImageTransform.Microsoft.Matrix。它一共接受五個(gè)參數，前四個(gè)參數需要自行計算三角函數，然后分別寫(xiě)成M11 = cos(rotation),M12 = -sin(rotation),M21 = sin(rotation),M22 = cos(rotation)，其中的rotation表示旋轉角度，如果順時(shí)針旋轉7.5度，則rotation就為7.5；第五個(gè)參數SizingMethod表示重繪方式，'auto expand'代表自動(dòng)擴展到新的邊界。</p>
<p>除了這個(gè)濾鏡，IE還有一個(gè)稍微簡(jiǎn)單一點(diǎn)的濾鏡DXImageTransform.Microsoft.BasicImage(rotation=x)。其中的x只能取值為1，2，3，0，分別表示順時(shí)針選擇90度、180度、270度和360度。</p>
</div>
</div>
<textarea> /* CSS3 */
.box_rotate {
-moz-transform: rotate(7.5deg); /* FF3.5+ */
-o-transform: rotate(7.5deg); /* Opera 10.5 */
-webkit-transform: rotate(7.5deg); /* Saf3.1+, Chrome */
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9914,M12=-0.1305,M21=0.1305,M22=0.9914,SizingMethod='auto expand');
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9914,M12=-0.1305,M21=0.1305,M22=0.9914,SizingMethod='auto expand')"; /* IE8 */
}
</textarea>
<h1 id="font-face">服務(wù)器端字體的css (<strong>font-face</strong>)</h1>
<textarea> /* CSS3 */
@font-face {
font-family: 'MyFont';
src: url('myfont.eot'); /* IE6+ */
src: local('myfont.ttf'),
url('myfont.woff') format('woff'), /* FF3.6 */
url('myfont.ttf') format('truetype'); /* FF3.5+, Saf3+,Chrome,Opera10+ */
}
.box_font{ font-family: "MyFont"; }
</textarea>
<div>
<div>
<p>第一行代碼：</p>
<p>font-family: 'MyFont';</p>
<p>表示為這種字體起一個(gè)名稱(chēng)，可以隨意設置，我這里用的是MyFont。</p>
<p>src: url('myfont.eot');</p>
<p>這一行表示字體位置，由于ie只支持服務(wù)器端的eot字體，所以這一行是ie專(zhuān)用的。</p>
<p>src: local('myfont.ttf'),<br /> url('myfont.woff') format('woff'), <br /> url('myfont.ttf') format('truetype');</p>
<p>local()表示在本機（客戶(hù)端）查找該字體，如果本機已經(jīng)安裝了，就不用下載了。url()表示字體在服務(wù)器上的位置，format()用來(lái)說(shuō)明字體格式。Firefox 3.5支持TrueType和OpenType字體，Firefox 3.6又增加了WOFF字體。其他基于Webkit引擎的瀏覽器（sarif，opera、chrome），目前好像只支持truetype。</p>
<p>然后，使用的時(shí)候這樣寫(xiě)就可以了。</p>
<p>h2{ font-family: "MyFont"; }</p>
<p>需要注意的是，字體文件必須與網(wǎng)頁(yè)文件來(lái)自同一個(gè)域名，符合瀏覽器的"同源政策"。另外，由于中文字體文件太大，服務(wù)器端字體顯然只適用于英文字體。</p>
</div>
</div>
</div>
