HTML z-index 和定位答案

【问题标题】：HTML z-index and positioningHTML z-index 和定位
【发布时间】：2011-03-20 20:28:49
【问题描述】：

我正在尝试制作一个基于 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 写太多了？和我的扑克程序的定位，我必须用像素移动所有东西吗？哪个是最好的定位方式？稍后我必须开始在桌子上移动筹码和卡片等。

图片：

【问题讨论】：

你能添加一张它应该是什么样子的图片吗？目前，我知道如何移动所有内容，但我不知道该将元素移动到哪里。
@thirtydot: 我在主帖中添加了图片

标签： html css positioning z-index

【解决方案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 可以通过发现任何重复并尝试消除它来稍微改进。

【讨论】：

我的#chat 剩下 500，我认为它必须与相对值有关，因为当我输入绝对值时，它会起作用。但我真的很想用相对，为什么？我不确定..但有人说它更好
这意味着#chat的左侧位置将增加500px——换句话说，它会向右增加500px。这就是你想要达到的目标吗？相对意味着它将相对于最近的具有位置的父元素定位，在您的情况下是#content。
看看我在主帖上的照片，这就是我想要达到的目标。我想把聊天窗口放在扑克桌的顶部
您想将top: -500px; 之类的内容添加到#chatbox，然后看看它是如何向上移动的。

【解决方案2】：

我最近不得不为此苦苦挣扎。 z-index 似乎并未在全球范围内生效。 z-index 的功能似乎影响了父元素绘制事物的顺序。如果两个元素不包含在同一个父元素中，那么它们的相对 z-index 值是没有意义的。只是需要牢记。

看起来聊天框似乎会在表格之后（并遮住）绘制，但是虽然您已经给它一个大小，但您还没有告诉它在父“容器”中绘制的位置。我猜你想使用“left:0”和“top:0”样式来定位“chat”元素。

【讨论】：

我的#chat 剩下 500 个，我认为它必须与相对值有关，因为当我输入绝对值时，它会起作用。但我真的很想用相对，为什么？我不确定..但有人说它更好..即使我把左边和顶部放在上面，它也不能和亲戚一起工作