HTML z-index and positioning

问题

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.

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>

and in 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.

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?

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.

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.

picture:

回答1:

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!

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;
}

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.

回答2:

I had to wrestle with this recently. z-index does not seem take effect globally. The function of z-index seems to affect the order in which things are draw by the parent element. If two elements are not contained by the same parent, then their relative z-index values are meaningless. Just something to bear in mind.

It does seem like the chatbox would be draw after (and obscuring) the table, but while you have given it a size, you haven't told it where to be drawn within the parent "container". I'm guessing you want to position the "chat" element using the "left:0" and "top:0" styles.

来源：https://stackoverflow.com/questions/5371306/html-z-index-and-positioning

标签

html

css

positioning

z-index