Home  >  Article  >  Web Front-end  >  为什么图片会覆盖文字的显示_html/css_WEB-ITnose

为什么图片会覆盖文字的显示_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:17:024631browse

图片一旦下滑以后图片就会被遮住了 如何让文字不被图片遮住 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("a").mouseover(function(){var id= $(this).attr("id");var i=id.replace("A", "B");$("#"+i).animate({top:"0px"},400);  }); $("a").mouseout(function(){var id= $(this).attr("id");var i=id.replace("A", "B");$("#"+i).animate({top:"-149px"},400); }); }); </script>   <style type-"text/css">img { position:absolute;      top:-149px; }li{margin: 0; padding: 0; border: 0;}ul {width: 700px; margin: 0 auto; text-align: center;}	li {float:right;list-style: none;}	 li  a{                 display: block;                      width: 97px;                                       	     padding: 72px 0 0 0;                    margin: 0 32px 0 32px;      	     font: bold 16px Helvetica;     }</style> <ul><li><a id="A1" >A</a><img  id="B1"src="1.png" / alt="为什么图片会覆盖文字的显示_html/css_WEB-ITnose" ></li> <li><a id="A2" >B</a><img  id="B2"src="1.png" / alt="为什么图片会覆盖文字的显示_html/css_WEB-ITnose" ></li><li><a id="A3" >C</a><img  id="B3"src="1.png" / alt="为什么图片会覆盖文字的显示_html/css_WEB-ITnose" ></li> <li><a id="A4" >D</a><img  id="B4"src="1.png" / alt="为什么图片会覆盖文字的显示_html/css_WEB-ITnose" ></li></ul>


回复讨论(解决方案)

position:absolute;
如果某个标签带有这个属性,那么该标签就不在归属于文档流,那么如果在该标签定义的位置也有其他标签,那么这个标签会覆盖其他没有带有position:absolute;这个属性的标签。

像这样的,需要特别注意,可以都加上position属性,或者就得自己控制,别被覆盖到了。

应该是这样的

高手帮我修改一下 这样说我修改不出

li  a{	position:relative;	top:20px;	z-index:1000;	display: block;                      	width: 97px;                                                	padding: 72px 0 0 0;                    	margin: 0 32px 0 32px;               	font: bold 16px Helvetica;		}


修改上面那三个,或者你查一下上面三个的意思,按照自己要的,进行修改试试吧

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn