我们的小组正在尝试为要在我们网站上销售的产品创建一个滑出式选项面板。
出于某种原因，CSS 对我们起作用，让我们的图像正确分层很痛苦。过去，z-index 可以解决问题，但现在我们必须测试随机样式和变通方法，才能远程获得我们正在寻找的内容。
目前，我们有一个包含绝对内容的相对 div，这应该已经给布局设计师们敲响了警钟。
一切正常，但为什么不能正常工作？我会提供一个来 self 们的 ftp 的示例，但由于某种原因我的互联网出现问题，我无法上传内容。
现在，这是我们的来源:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.5.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.5.custom.min.js"></script>
<script type="text/javascript">
function move(name){
if (name.style.left == "500px")
{
$(name).animate({left: 0}, 300);
}
else if(name.style.left == "0px")
{
$(name).animate({left: 500}, 300);
}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery Test</title>
</head>
<body>
<div class="item">
<div id="top" style="z-index:1; position: absolute; top:0px; left:0px; width:500px; height:375px;">
<img src="images/car1.jpg" />
</div>
<div id="bottom" style="z-index:-1; position:absolute; top: 0px; left:0px; width:550px; height:375px;">
<img src="images/car2.jpg" />
<div class="optionsExpandButton" style=" position:absolute; left: 500px; width:50px; height:375px; background-color: #000; z-index:inherit; float:left" onclick="move(bottom);"></div>
</div>
</div>
</body>
</html>
编辑:
忘记提及主要问题。
通常，当我们创建 z-index 时，图像最终会彼此下方而不是彼此下方。
例如:
-------------------------
| z-index: 1 | <- img 1
-------------------------
| z-index: -1 | <- img 2
-------------------------
最佳答案
编辑:
经过讨论，我意识到您想要一个向右/向左滑动的解决方案。这是该解决方案，然后是一些更一般的建议。
首先是 HTML:
<div class="item">
<div id="top">
<img src="http://img814.imageshack.us/img814/8089/car1j.jpg" alt="..." />
</div>
<div id="bottom">
<img src="http://img178.imageshack.us/img178/3779/car2dy.jpg" alt=".." />
</div>
<div class="optionsExpandButton"></div>
</div>
我在 #bottom 中的 .optionsExpandButton 有一些定位和点击问题，所以我把它放在外面。我相信您实际上可以采用任何一种方式。
无论如何，请注意完全没有内联 CSS 或 JS。不要忘记添加可访问性的 alt 标签!
现在让我们设置定位，以便我们可以正确地从左向右滑动。
我们将绝对定位 .item，相对定位里面的 3 个 div。
这意味着 #top 位于 left:0, top:0。现在 #bottom 将低于 left:0, top:375，但我们希望它在 #top 上，所以 # bottom 将得到 left:0, top:-375。展开的 div 将位于 left:0, top:750，但我们希望它位于 #top 的高度并在其右侧，因为 # top 的宽度为 500，这使得展开按钮位于 left:500，top:-750:
CSS
img, div { border:0; padding:0; margin:0; }
div.item {
position: absolute; /* This could also be relative */ }
#top {
z-index:1;
position: relative;
top:0px; left:0px;
width:500px; height:375px; }
#bottom {
z-index:-1;
position:relative;
top: -375px; left:0px;
width:550px; height:375px; }
div.optionsExpandButton {
position:relative;
width:50px; height:375px;
top: -750px; left: 500px;
background-color: #000;
z-index:999; }
现在，让我们使用 .toggle() 代替笨拙的 if 语句向右滑动而不是向左滑动:
JS:
$(function() {
$(".optionsExpandButton").toggle(function() {
$(this).animate({left: '+=425' });
$("#bottom").animate({left: '+=425' });
}, function() {
$(this).animate({left: '-=425' });
$("#bottom").animate({left: '-=425' });
});
});
Try it out at this jsFiddle
下面是旧答案:
我建议不要使用内联 JS 和内联 CSS。将内容与功能和样式分开。
您可能会发现只列出所有不定位的 div，然后使用 jQuery 定位所有内容要容易得多。这也适用于您的 z-index。
看起来你想显示一张图片，然后在点击时向下滑动另一张图片。
我将向您展示一种无需担心 CSS 即可轻松完成此操作的方法。如果用户禁用了 JS，则该方法会很好地降级，因为两个图像在没有 JS 的情况下都可见，如果您依赖于设置 CSS z 索引并将一个图像放在另一个图像之上，则情况并非如此。
首先，我将向您展示如何使用 ID 制作一个 slider ，就像您使用的方法一样。然后，我将向您展示如何使用类在一个页面上放置任意数量的不同图像 slider 。
一个带有 ID 的 slider :
因此，首先，我会以一种无需 JS 也能理解的方式设置 HTML。只是一个接一个的图像。我不会内联 JS 或 CSS。不要忘记用于辅助功能的 alt 标记。
<div class="item">
<div id="top">
<img src="images/car1.jpg" alt="..." />
</div>
<div id="bottom">
<img src="images/car2.jpg" alt="..." />
</div>
<!-- Don't nest this button in either top or bottom! -->
<div id="expand">+ Expand</div>
</div>
现在 jQuery 可以在页面准备就绪时隐藏图像 #2，并在按下 expane div 时上下滑动它。您可以为按钮使用类，但这有点复杂，所以首先我将展示如何使用 id 来实现:
$(function() { // <== doc ready
$("#bottom").hide(); // Hide the second image
// Define what happen on button click
$("#expand").click(function() {
var $this = $(this); // This is for efficiency
// Toggle the second image sliding up or down
$("#bottom").slideToggle();
// Toggle the writing in the button.
$this.html() == "+ Expand" ?
$this.html("- Contract") :
$this.html("+ Expand");
});
});
Try it out with the jsFiddle example
许多带有类的 slider :
现在让我们概括并仅使用以特定方式设置 div 的类。
HTML:
<div class="item">
<div class="top"><img src="img1a" alt="..." /></div>
<div class="bottom"><img src="img2a" alt="..." /></div>
<div class="expand">+ Expand</div>
</div>
<div class="item">
<div class="top"><img src="img1b" alt="..." /></div>
<div class="bottom"><img src="img2b" alt="..." /></div>
<div class="expand">+ Expand</div>
</div>
...
jQuery
$(function() {
$("div.item div.bottom").hide();
$(".expand").click(function() {
var $this = $(this);
$this.prev().slideToggle();
$this.html() == "+ Expand" ?
$this.html("- Contract") :
$this.html("+ Expand");
});
});
Try it out with this jsFiddle
引用资料:
关于jquery - 使用 CSS 使图像正确定位/分层，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3911318/