HTML z-index和定位

Question

我正在尝试制作一个基于html / css的扑克程序，此刻我正试图弄清楚如何将筹码放置在桌子上或将聊天窗口移到桌子上。

我的代码在index.html中

<body>
    <div id="content">
        <div id="table">
            <div id="boardImage"><img src="./img/poker_table_new.png" /></div>
        </div>

        <div id="chat">
            <textarea id="chatBox"></textarea>
            <input id="message" type="text">
            <input id="sendButton" type="submit" value="Send">
        </div>
    </div>

和在CSS中

#content {
    position:relative;
    z-index:-1;
}
#table {
    position:inherit;
    z-index:-1;
}

#chat {
    z-index:2;
    position:inherit;
    left:500px;

}
#boardImage {
    position:inherit;
    z-index:-1;
}
#chatBox {
    position:inherit;
    z-index:2;
    width: 300px;
    height: 300px;

}

基本上我试图在我的桌面图片上移动聊天框，但是它并没有移动到顶部。

我不确定我是否应该在我的扑克程序中使用相对位置？ 还是我正确使用Z-index？ 我必须为所有div放置z-index吗？

目前，在html上方有一个扑克桌，当我向下滚动时，有我的聊天框，但它们应该在彼此之间。

我有太多相同的代码吗？ 编写z-index过多？ 和定位我的扑克程序时，我是否必须用像素移动所有东西，哪种才是最好的定位方式？ 以后我必须开始在桌上等移动筹码和卡片。

图片： 在此处输入图片说明

Answer 1

z-index仅适用于定位的元素。 position: relative位置，根据该元素最初的位置而定，但是您未指定诸如top或left因此它保持在同一位置-是的，您正在正确使用所有这些内容！

在编写CSS时，我的方法是编写一些可行的方法（您已经在此处完成），然后在所有我重复自己的地方“分解”。 您有很多position: inherit; ，因此您可以将它们合并为一条规则。 例如：

.inherit-position {
    position: inherit;
}

然后，您可以从CSS中删除重复的position样式，并为这些div元素提供一个额外的类，如下所示：

<div id="chat" class="inherit-position"></div>

简而言之，您这里根本没有做错任何事情，但是可以通过发现任何重复并尝试消除这种重复来稍微改善CSS。

Answer 2

我最近不得不为此付出努力。 z-index似乎并未在全球范围内生效。 z-index的功能似乎会影响父元素绘制事物的顺序。 如果同一父级未包含两个元素，则它们的相对z-index值将无意义。 只是要记住一点。

看起来聊天框似乎在绘制（并遮盖了）表格之后绘制，但是在给它指定尺寸的同时，您没有告诉它在父“容器”中绘制的位置。 我猜您想使用“ left：0”和“ top：0”样式放置“聊天”元素。

HTML z-index和定位

问题描述

2 个解决方案

解决方案1
1 已采纳 2011-03-20 20:47:58

解决方案2
0 2011-03-20 21:06:02

HTML z-index和定位

问题描述

2 个解决方案

解决方案1 1 已采纳 2011-03-20 20:47:58

解决方案2 0 2011-03-20 21:06:02

解决方案1
1 已采纳 2011-03-20 20:47:58

解决方案2
0 2011-03-20 21:06:02