Home > Article > Web Front-end > Why do pictures cover the display of text_html/css_WEB-ITnose
Why do pictures cover the display of text_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:17:024683browse
Once the picture slides down, the picture will be covered. How to prevent the text from being covered by the picture?
<!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" /></li> <li><a id="A2" >B</a><img id="B2"src="1.png" /></li><li><a id="A3" >C</a><img id="B3"src="1.png" /></li> <li><a id="A4" >D</a><img id="B4"src="1.png" /></li></ul> Reply to the discussion (solution)
position :absolute;
If a tag has this attribute, then the tag no longer belongs to the document flow. If there are other tags at the position defined by the tag, then this tag will cover other tags that do not have position:absolute; The label for this attribute.
Like this, you need to pay special attention. You can add the position attribute to everything, or you have to control it yourself to avoid being overwritten.
It should be like this
Experts can help me modify it. I can’t modify it like this
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; } Modify the three above, or you Check the meanings of the above three and try modifying them according to what you want