javascript - 为什么 z-index 不起作用？-6ren

javascript - 为什么 z-index 不起作用？

转载作者：行者123 更新时间：2023-11-27 22:41:54

24

4

<分区>

我正在编写一个 Web 应用程序，我在处理一个部分时遇到了问题，我有一个翻转的东西，但它目前正在滚动。编辑:pastehtml 被拒绝，这里是 jfiddle:http://jsfiddle.net/XmKwt/1/

右边的 div 位于左边的 div 之下，即使 z-index 表明它不应该。

我发现如果“position:relative;” css 被删除(参见源代码)然后它工作得很好，但我不明白为什么我需要“position:relative;” css 有其他原因，没有在这个简化的例子中展示。

<!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>
    <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <style>
    /* Remove this line and it works */

    #featureleft {position:relative;}

    /* End */

    #layoutdiv { text-align: left; width: 940px; }
    #featureleft { width: 580px; float: left;z-index:10; background:red; }
    #featureright { float: right; z-index:100;}
    #copypaste { background-color: #bbb; margin-bottom: 40px; padding-right: 10px; padding-left: 10px; width: 300px; height:200px; margin-left: 20px; border: solid 5px #000; }
    </style>

    <script language='javascript'>
    $(document).ready(function() {
        $('#copypaste').mouseenter(function(){
            p=$(this).position();
            // increase/move by p.left
            move=Math.round(p.left)-0;
            width=parseInt($(this).css('width'))+parseInt(move);
            margin=0-(parseInt(move)-20);
            inputs=parseInt(move)+280;
            $(this).css('width',width+'px').css('margin-left',margin+'px').css('height',$(this).height);
        });

        $('#copypaste').mouseleave(function(){
            $(this).css('width','300px');
            $(this).css('margin-left','20px');
        });
    });
</script>
</head>

<body>
    <div id="layoutdiv" class='container fakewindowcontain'>
        <div id='featurewrapper'>
            <div id='featureleft'>
                <p>Lorem ipsum dolor sit amet, ut eget et enim, nec auctor habitasse eu mattis eget odio, lacinia vivamus libero dictum, tempor nunc nec nam fringilla mauris, et class dolor curabitur ipsum. Commodo ultricies id</p>
            </div>

            <div id='featureright'>
                <div id='copypaste'>
                <p>Lorem ipsum dolor sit amet, ut eget et enim, nec auctor habitasse eu mattis eget odio, lacinia vivamus libero dictum, tempor nunc nec nam fringilla mauris, et class dolor curabitur ipsum. Commodo ultricies id</p>
                </div>      
            </div> 
        </div>
    </div>
</body>
</html>

24

4

0

文章推荐： css - 未选中单选按钮时禁用 number_field

文章推荐： javascript - 加载动态 HTML - 服务器端或客户端

文章推荐： c++ - 由于#define，VS2015 找不到成员函数 [c++] 定义

文章推荐： html - 位于背景图像上时按钮失去功能

实例分析Try {} Catch{} 作用
今天有小伙伴给我留言问到，try{...}catch(){...}是什么意思？它用来干什么？简单的说他们是用来捕获异常的下面我们通过一个例子来详细讲解下
html - 列表社交媒体链接的 ARIA 作用
我正在努力提高网站的可访问性，但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接，因
java.util.Timer SystemTime 作用？
说现在是 6 点，我有一个 Timer 并在 10 点安排了一个 TimerTask。之后，System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
php - 什么是 Doctrine hydration 作用？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
python入门:argparse浅析 nargs='+'作用
我就废话不多说了，大家还是直接看代码吧~ ? 1
Maven是什么?Maven的概念+作用+仓库的介绍+常用命令的详解
Maven系列1 1.什么是Maven？ Maven是一个项目管理工具，它包含了一个对象模型。一组标准集合，一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。核心功能 Mav

首页

博学

6Ren·AI

商城

javascript - 为什么 z-index 不起作用？