为什么图片会覆盖文字的显示_html/css

Inhaltsverzeichnis

回复讨论(解决方案)

Heim

Web-Frontend

HTML-Tutorial

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

Jun 24, 2016 pm 12:17 PM

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

<!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  src="/static/imghw/default1.png"  data-src="1.png"  class="lazy"  id="B1" / alt="为什么图片会覆盖文字的显示_html/css_WEB-ITnose" ></li> <li><a id="A2" >B</a><img  src="/static/imghw/default1.png"  data-src="1.png"  class="lazy"  id="B2" / alt="为什么图片会覆盖文字的显示_html/css_WEB-ITnose" ></li><li><a id="A3" >C</a><img  src="/static/imghw/default1.png"  data-src="1.png"  class="lazy"  id="B3" / alt="为什么图片会覆盖文字的显示_html/css_WEB-ITnose" ></li> <li><a id="A4" >D</a><img  src="/static/imghw/default1.png"  data-src="1.png"  class="lazy"  id="B4" / alt="为什么图片会覆盖文字的显示_html/css_WEB-ITnose" ></li></ul>

Nach dem Login kopieren

回复讨论(解决方案)

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;		}

Nach dem Login kopieren

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

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn