HTML z-index和定位

问题描述：

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

I'm trying to make a html/css based poker program and at the moment im trying to figure out how I am going to put the chips on the table or move my chat window on table.

我的代码在index.html中

my code is in 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;

}

并且基本上试图移动我的桌面上的聊天框，但它不是在它的顶部移动。

and basically im trying to move the chatbox on my table picture, but it is not moving on top of it.

我不知道我应该使用位置相对的我的扑克程序？或者我正在使用z索引？必须把所有的div的z-index？

im not sure if i should use position relative for my poker program? or am i using the z-index correctly? must i put the z-index for all the divs?

在html的顶部有一个扑克桌，当我向下滚动时，有我的聊天框，但他们应该在另一个。

at the moment there is a poker table on top of the html and when i scroll down, there is my chatbox, but they should be on eachother.

我有太多相同的代码吗？太多写z-index？和定位为我的扑克程序，我必须移动一切与像素，这将是最好的定位方式去？后来我必须开始在桌子上移动芯片和卡等。

do i have too much same code? too much writing z-index? and positioning for my poker program, must i move everything with pixels and which would be the best positioning way to go? later on i must start moving chips and cards on table etc.

图片：

答

z-index 仅适用于定位的元素。 position：relative 根据元素原本的位置，但是你不指定 top left 所以它保持在同一个地方 - 所以是的，你正确使用所有这些！

z-index only works on positioned elements. position: relative positions according to where that element would originally have been, but you're not specifying anything like top or left so it stays in the same place — so yes, you're using all of that correctly!

我的写CSS的方法是写一些有效的（你在这里做的），然后在我重复自己的任何地方解决。你有很多 position：inherit; ，所以你可以将它们组合成一个规则。例如：

My approach when writing CSS is to write something that works (which you've done here) and then 'factor out' anywhere I've repeated myself. You've got lots of position: inherit;, so you might combine those into a single rule. For example:

.inherit-position {
    position: inherit;
}

然后，您可以删除重复的位置 CSS中的样式，只需给这些 div 元素一个额外的类：

You could then remove the repeated position styles from the CSS, and just give those div elements an extra class like this:

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

简而言之，你根本没有做错事 - 很少通过发现任何重复，并试图消除这一点。

In short, you're not doing anything wrong here at all — but your CSS could be improved a little by spotting any repetition, and trying to eliminate that.

HTML z-index和定位

相关推荐