当前位置： 文江博客话题详情

使用 CSS 正确定位图像/分层

发布于 2024-09-27 05:14:01 字数 2337 浏览 3 评论 0原文

我们的团队正在尝试为我们网站上销售的产品创建一个滑出式选项面板。

由于某种原因，CSS 对我们产生了影响，让我们的图像正确分层是一件痛苦的事情。过去，z-index 可以解决问题，但现在我们必须测试随机样式和解决方法，才能远程获取我们正在寻找的内容。

目前，我们有一个具有绝对内容的相对 div，这应该已经为布局设计师发出了危险信号。

一切都按其应有的方式运作，但为什么不正常呢？我想提供一个来自 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 索引时，图像最终会位于彼此下方，而不是彼此下方。

前任：

-------------------------
|       z-index: 1      | <- img 1
-------------------------
|       z-index: -1     | <- img 2
-------------------------
原文

Our group is trying to create a slide-out option panel for products to be sold on our site.

For some reason, CSS is acting up on us and it's a pain to get our images to layer properly. In the past, z-index did the trick, but now we have to test random stylings and workarounds just to get remotely what we're looking for.

At the moment, we have a relative div with absolute content, which should already be raising a red flag for you layout designers.

Everything functions as it should, but why isn't this working right? I would provide an example from our ftp, but for some reason my internet is acting up and I can't get the content uploaded.

For now, here's our source:

<!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>

EDIT:

Forgot to mention the main issue.

Typically when we create our z-indexes, the images will end up below each other instead of beneath each other.

Ex:

-------------------------
|       z-index: 1      | <- img 1
-------------------------
|       z-index: -1     | <- img 2
-------------------------

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

梦醒时光 2024-10-04 05:14:01

编辑：

经过讨论，我意识到您想要一个向右/向左滑动的解决方案。这是该解决方案，后面是一些更一般的建议。

首先是 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 的右侧，因此 #底部将得到左：0，顶部：-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' });    
    });
});
​

在这个 jsFiddle 上尝试一下

（在其自己的页面上）

下面是旧答案：

我建议不要使用内联 JS 和内联 CSS。将内容与功能和样式分开。

您可能会发现只列出所有 div 而无需定位，然后使用 jQuery 定位所有内容要容易得多。这也适用于您的 z 索引。

看起来您想显示一张图像，然后单击向下滑动另一张图像。

我将向您展示一种非常简单的方法，无需担心 CSS。如果用户禁用了 JS，则该方法会很好地降级，因为两个图像在没有 JS 的情况下都可见，但如果您依赖于设置 CSS z 索引并将一个图像放置在另一个图像之上，则情况并非如此。

首先，我将向您展示如何使用 ID 制作一个滑块，与您的做法类似。然后我将向您展示如何使用类在一页上放置任意数量的不同图像滑块。

一个带有 ID 的滑块：

因此，首先，我会以一种无需 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");
    });
});​

尝试使用 jsFiddle 示例

许多带有类的滑块：

现在让我们概括并仅使用以某种方式设置的 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");
    });
});​

用这个 jsFiddle 尝试一下

参考文献：

Edit:

After discussion I realized you wanted a slide right / left solution. Here is that solution, followed by some more general advice.

First the 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>

I had some positioning and clicking issues with .optionsExpandButton inside #bottom, so I put it outside. I'm sure you could actually do it either way.

Anyway, notice the complete lack on inline CSS or JS. Dont' forget to add your alt tags for accessibility!

Now let's set the positioning up so we can slide left to right correctly.

We'll position .item absolutely and the 3 divs inside relatively.

This means that #top is at left:0, top:0. Now #bottom would be below that at left:0, top:375, but we want it right on #top so #bottom will get left:0, top:-375. The expand div would be at left:0, top:750, but we want it at the height of #top and to the right of it, since #top is 500 wide that make the expand button at left:500, top:-750:

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

Now, let's make use of .toggle() for sliding right than left instead of an awkward if statement:

The 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

(on its own page)

Below is the old answer:

I would advise against inline JS and inline CSS. Keep the content separate from the functionality and styling.

You might find it much easier to just list all your divs without positioning, and then position everything with jQuery. This also applies to your z-index.

It looks like you want to show one image, and on click slide down another image.

I'll show you a way to do this quite simply without worrying about CSS. The method degrades nicely if a user has JS disabled in that both images will be visible without JS, which is not true if you rely on setting CSS z indices and position one image above the other.

First I'll show you how to do one slider with IDs, similar to how you have. Then I'll show you how to put as many different image sliders as you want on one page using classes.

One slider with IDs:

So, first, I would set up the HTML in a way that makes sense without JS. Just one image after the other. I would make no JS or CSS inline. Don't forget about your alt tags for accessibility.

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

Now the jQuery can hide image #2 when the page is ready and slide it up and down when the expane div is pressed. You can use classes for the button, but that's a little more complicate, so first I'll show how to do it with an 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

Many sliders with classes:

Now let's generalize and use just classes with divs set up a certain way.

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

References:

回复 原文
~没有更多了~

关于作者

﹂绝世的画

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

lanyue

文章 0 评论 0

海螺姑娘

文章 0 评论 0

Demos

文章 0 评论 0

亢龙有悔

文章 0 评论 0

海未深

文章 0 评论 0

浅忆流年

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文