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太多了？我的扑克程序定位，我必须用像素移动一切，这将是最好的定位方式吗？后来我必须开始在桌子上移动芯片和卡片等。

图片： enter image description here

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”样式定位“chat”元素。

HTML z-index和定位

2 个答案: