求前台牛人解答关于z-index的问题_html/css_WEB-ITnose
z-indexie7 z-index ie7 显示一部分
首先上图片,在firefox下面,实现的效果是鼠标放上去
这个效果已经实现了。
可是在ie 7 下 ,
原来效果
鼠标放上去之后
只在图片放在的位置实现了效果,超过图片之后,就显示不出来了。
代码如下:原来的界面是一个图片,鼠标放上去之后是同样的图片加上下面的内容,
<div id="ps_albums"> <s:iterator value="categoryProducts" id="products"> <div class="ps_album"> <div class="similar_thumb"> <table class="similarPictuer"> <tr><td valign="middle" align="center"> <s:if test="#products.productImg1 !=null && #products.productImg1 != ''"> <s:if test='#product.productImg1.substring(0,2) == "//" || #product.productImg1.substring(0,4) == "http"'> <img class="img1 lazy" src="/static/imghw/default1.png" data-src="<s:property value=" #product.productImg1"/ alt="求前台牛人解答关于z-index的问题_html/css_WEB-ITnose" >" alt="Product Picture" width="95" style="max-width:90%" onerror="urlImgError(this)"/> </s:if> <s:else> <s:if test="#application['modify_product_image'] == 'true'"> <img class="img1 lazy" src="/static/imghw/default1.png" data-src="<s:property value='#application[" #application["modify_image_link"]'/ alt="求前台牛人解答关于z-index的问题_html/css_WEB-ITnose" >?url=<s:property value='#products.productImg1'/>&size=95X95" /> </s:if> <s:else> <img class="img1 lazy" src="/static/imghw/default1.png" data-src="<s:property value='#application[" #application["netcloud.product.images.path"]'/ alt="求前台牛人解答关于z-index的问题_html/css_WEB-ITnose" ><s:property value='#products.productImg1'/>" width="95" style="max-width:90%" /> </s:else> </s:else> </s:if> <s:else> <img src="/static/imghw/default1.png" data-src="/static/portal/images/photonotavailable.jpg" class="lazy" style="max-width:90%" style="max-width:90%" / alt="求前台牛人解答关于z-index的问题_html/css_WEB-ITnose" > </s:else> </td></tr></table> <div class="rltd_over"> <table class="coversimilarPictuer"> <tr><td valign="middle" align="center"> <a href="/portal/epp<s:property value="#products.productId"/>-<s:property value="@com.netcloud.core.utils.TransCodingUtils@replace(#products.productName)"/>.htm"> <s:if test="#products.productImg1 !=null && #products.productImg1 != ''"> <s:if test='#product.productImg1.substring(0,2) == "//" || #product.productImg1.substring(0,4) == "http"'> <img src="/static/imghw/default1.png" data-src="<s:property value=" class="lazy" #product.productImg1"/ alt="求前台牛人解答关于z-index的问题_html/css_WEB-ITnose" >" alt="Product Picture" width="95" style="max-width:90%" onerror="urlImgError(this)"/> </s:if> <s:else> <s:if test="#application['modify_product_image'] == 'true'"> <img class="img1 lazy" src="/static/imghw/default1.png" data-src="<s:property value='#application[" #application["modify_image_link"]'/ alt="求前台牛人解答关于z-index的问题_html/css_WEB-ITnose" >?url=<s:property value='#products.productImg1'/>&size=95X95" /> </s:if> <s:else> <img class="img1 lazy" src="/static/imghw/default1.png" data-src="<s:property value='#application[" #application["netcloud.product.images.path"]'/ alt="求前台牛人解答关于z-index的问题_html/css_WEB-ITnose" ><s:property value='#products.productImg1'/>" width="95" style="max-width:90%" /> </s:else> </s:else> </s:if> <s:else> <img src="/static/imghw/default1.png" data-src="/static/portal/images/photonotavailable.jpg" class="lazy" style="max-width:90%" style="max-width:90%" / alt="求前台牛人解答关于z-index的问题_html/css_WEB-ITnose" > </s:else> </a> </td></tr></table> <p> <s:if test="#products.condition != null && #products.condition != ''"> Condition :<font color="#008B8B"><n:selectlabel name="#products.condition" list="#{1:'NEW',2:'USED',3:'Manufacturer Refurbished',4:'Seller Refurbished',5:' For Parts or Not Working',6:'Recycles'}" /></font><br/> </s:if> <s:if test="#products.manufOtherName != null && #products.manufOtherName != ''"> Brand: <font color="#008B8B"><s:property value="manufOtherName"/></font><br /> </s:if> <s:if test="#products.modelNo != null && #products.modelNo != '' "> Model#: <font color="#008B8B"> <s:property value="modelNo"/></font><br /> </s:if> <s:if test="#products.prodLocCity == null && products.prodLocState == null && products.prodLocCountry == null"> </s:if> <s:else> Location: <font color="#008B8B"> <s:if test="#products.prodLocCity != null && #products.prodLocCity !=''"> <s:property value="prodLocCity"/>, </s:if> <s:if test="#products.prodLocState != null && #products.prodLocState != ''"> <s:property value="prodLocState"/>, </s:if> <s:if test="#products.prodLocCountry != null && #products.prodLocCountry != '' "> <s:property value="prodLocCountry"/> </s:if> </font> </s:else></p> <input name="productIdS" type="button" id="productIdSimilar" onclick="similarToinquiry(<s:property value="productId"/>)"/> </div> </div> </div> </s:iterator> </div>
搜索了下说是该元素的父元素设置为position: relative; 我从这个元素开始向上到body每层都设置了position: relative; 而且z-index比class = rltd_over的z-index 都小,可是依旧不行,求大神支招
回复讨论(解决方案)
你的样式里有超出隐藏没,如果有先去掉看看
你的样式里有超出隐藏没,如果有先去掉看看 没有的哈,有的话firefox不会成功的,而且我刚刚特看了下,没有的

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











HTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.

HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.

anexampleStartingtaginhtmlis, whithbeginsaparagraph.startingtagsareessentialinhtmlastheyinitiate rements, definetheirtypes, andarecrucialforstructurituringwebpages 및 smanstlingthedom.

WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.

GiteEpages 정적 웹 사이트 배포 실패 : 404 오류 문제 해결 및 해결시 Gitee ...

웹 주석 기능에 대한 Y 축 위치 적응 알고리즘이 기사는 Word 문서와 유사한 주석 기능을 구현하는 방법, 특히 주석 간격을 다루는 방법을 모색합니다 ...

이미지를 클릭 한 후 주변 이미지를 산란 및 확대하는 효과를 얻으려면 많은 웹 디자인이 대화식 효과를 달성해야합니다. 특정 이미지를 클릭하여 주변을 만들 수 있습니다 ...

HTML, CSS 및 JavaScript는 웹 개발의 세 가지 기둥입니다. 1. HTML은 웹 페이지 구조를 정의하고 등과 같은 태그를 사용합니다. 2. CSS는 색상, 글꼴 크기 등과 같은 선택기 및 속성을 사용하여 웹 페이지 스타일을 제어합니다.
