HTML z-index and positioning - html

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:

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.

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.

Related

Transparent element in html

I want to make a button and next to it a div, but div should have relative position and be moved to the left, so this way it would overlap a button and it couldn't be clicked, so I wonder is there a way to do that? except putting a button into that div.
here is something what i'm trying to do:
div {
background-color:green;
width:200px;
}
input:checked+div {
background-color:salmon;
}
<body>
<input type=checkbox>
<div style="display:inline-block;width:200px;position:relative;left:-30px;">
<p>
text
</p>
</div>
</body>
So i just need to make input here clickable
Not a good way to solve it, but you could work with position: relative; z-index: 1 on your button. I would consider creating a different structure altogether, since this is really ugly and unmanageable. See https://jsfiddle.net/w6ymq758/

How is it possible to make a horizontal bar (fixed position, always at the top of screen) while its height is unknown?

I want a horizontal bar at the top of HTML page. It should always be at the top of the screen, So I made this:
<body>
<div id="message_bar" style="position: fixed; top: 0px; width: 100%; z-index: 1000;">
</div>
<div class="other_divs" style="width: 100%; float: left;">
</div>
</body>
Now, this bar should not cover the rest of the body. If I knew the height of it, let's be 50px for example, I would do it by:
<body style="padding-top: 50px;">
But unfortunately, the height of this message_bar is variable and unknown (It's contents are set dynamically at server-side).
Is there any way to solve this problem purely by CSS?
Thank you very much.
P.S.
This message_bar would display like menu bars in windows applications: they are always at the top, and they never cover the main body. In fact, vertical scroll bar starts from "other_divs".
UPDATE 2:
Hey, Unbelievable! I guess I've managed to create the potential layout for a horizontal menu bar, purely with CSS. Here is my solution thanks to the power of vh:
<body>
<div style="display:block; width:100%; height:95vh !important; overflow:hidden;">
<div id="message_bar" style="float:left; width:100%; display:block;" >
this text appears always on top
</div>
<div style="float:left; width:100%; height:100%; display:block; overflow:auto;">
<div id="main_content" style="background:blue;">
Here lies the main content of the page.
<br />The below line is a set of 40 list items added to occupy space
<ol><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li></ol>
</div>
</div>
</div>
</body>
I checked it in Chrome,IE, and FireFox, and it worked neatly!
Anyway, I must thank the community here; Even when no answer is provided, the discussion and different viewpoints stimulate thinking process and eases solution finding.
The only way to solve this with purely CSS is adding a duplicate of the bar at the top of the page with position: relative and a lower z-index. This duplicate bar would always be hidden behind the fixed one (you could use opacity: 0; pointer-events: none if needed) and would push the rest of the page down. However this solution is very ugly as it adds a lot of HTML.
I recommend using JavaScript with jQuery for a pretty easy solution.
$(document).ready(function() {
$('.wrapper').css('padding-top', $('.message_bar').outerHeight());
});
And create a wrapper div around the content of the page (<div class="wrapper">Content...</div>). Alternatively, you could apply the padding to the body.
I am interested in your question, thanks for your information of the value of vh and vw. When I read your UPDATE 2. I found there is still something can be improved. The following is:
I change overflow:scroll; to overflow:auto. Because when your page haven't enough height. The value overflow:scroll will create a gray scroll bar. That is unfriendly for user.
I remove the most outer layer <div style="display:block; width:100%; height:95vh !important; overflow:hidden;">...</div> and retain the others. In other word, not to use vh also can be resolved your question.
There is my JSFIDDLE. (NOTICE: the JSFIDDLE is not achieve the effect that the above following. Copy these code on your native browser. I think this reason is about virtual circumstance compatibility. It worked in chorme & Firefox & IE 10)
You can have a class where are no scrollbars and then the position property will be position:absolute;
but if you want to keep this topHeader fixed in case of scrolling you have to use .fixed class
.topHeader {
background:#345;
color:#FFF;
height:50px;
padding:.5em;
position:absolute;
top:50px;
width:100%;
}
.fixed {
position:fixed;
top:0;
}
...and you some javascipt to bind scrol event:
var pixels= 50; //in pixels
$(window).bind('scroll', function () {
if ($(window).scrollTop() > pixels) {
$('.topHeader ').addClass('fixed');
} else {
$('.topHeader ').removeClass('fixed');
}
});
Why don't you just use relative positions? Remove position: fixed;. That's how it looks like:
http://jsfiddle.net/darekkay/8ab6uw7n/1/
Edit: I don't think, you can achieve this with pure CSS, if you don't know the height of the message. But you can use jQuery:
$("#message_bar").show(function() {
$( ".other_divs" ).css("margin-top", $(this).height() + "px");
});
http://jsfiddle.net/darekkay/8ab6uw7n/2/

Z-Index Not Working - Alternative Technique or Fix

I have assigned a fixed positioned menubar a high z-index, yet it still appears below other elements on my website. Is there an alternative technique I could use or something wrong with the code I have written. My website with the issue is here (note: you need to scroll up after scrolling down for the navbar to appear). The menu bar that is not appearing properly has the following code
#headerfull {
position:absolute;
top:-100px;
left:0;
z-index:10000;
width:100%;
height:100px;
background-color:#000000;
opacity:.7;
display:none;
}
but, for some reason, the z-index does not work. Elements like the "NinjaWarrior.info" image in the front and center, with a lower z-index appears in front of the navbar. The code for that image is below
<img style="position:absolute;z-index:10" src="images/logo_main.png" width="900" height="300" alt="American Ninja Warrior Fan Site">
Add this css:
#header {
position: relative;
z-index: 10000;
}
z-index works on containers with the same stacking context.
In your code, the DIVs header and content are siblings, and that's a condition for z-index numbers to apply.
The most easy way of memorizing this rule is by "code versioning":
<DIV with z-index=1>
<DIV with z-index=3/>
</DIV>
<DIV with z-index=2>
So, like decimals, or versioning number, 1.3 will never be greater than 2, and therefore the inner DIV will be always rendered below the second outer DIV.
Other than that, you need to apply positioning to each DIV which sets z-index.
I just set a big number because I was lazy, you can find a good feasible number by yourself if you want =), but this code works as I tested it on your website.
Thank you.
Be sure to read: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context
z-index is not working for me on child elements because of width and height which is declared ,I started adding {display :Inline} on my parent div on hover of child div.

Is it possible to fix an image to a webpage with a fluid layout?

I am constructing a website based off of the Fluid 960 GS System. I want to overlay an image in the header so that it stays put relative to the header image without disrupting the header itself. If I use the following CSS, I get halfway there:
.imgFloat {
position:absolute;
left:400px;
top:-2px;
z-index:1;
}
<div class="grid_16">
<h1 id="branding">
<img src="img/logo.png" />
<img src="img/float.png" class="imgFloat" />
</h1>
</div>
The only "issue" (not really since the CSS is doing what it is supposed to) with this code is that the image stays put rather than being staying x pixels away from the header image like I want.
If I change the position to relative, it breaks the size of the header and thus the layout of the header itself, but it will position the image like I want.
Is there a happy medium CSS "trick" that I can apply to achieve this result?
Thanks in advanced!
You just need to make sure that the absolute positioned element is inside the element you want it to be relative to. Then just add position: relative to that element and it should work.
So:
tag(position:relative)
ag(position:absolute; left:2px)
Should work
I'm just guessing here since the code you're showing is not detailed enough ;)
Update:
#branding {position:relative}
.imgFloat {
position:absolute;
left:400px;
top:-2px;
z-index:1;
}
set position: relative on the header element that wraps the .imgFloat element that should lock an absolutely positioned element to the wrapper.
Also you'll need to change your positions since the left will be relative to the 0,0 coordinate of the wrapper element.

HTML fixed div with relative div

I am looking for two divs that look like this:
<div style="height:20px;" />
<div style="height:100%;" />
This gives me two divs, one with 20px height, and the other at 100% of the entire screen height, which puts a vertical scroll bar worth 20px. What I actually want is one to be 20px, and the other to be 100%-20px. I know that IE has calc() method, but isn't there a much easier way to do this that will work in all browsers?
#div1 {
height:20px;
position:fixed;
top:0px;
right:0px;
left:0px;
}
#div2 {
position:absolute;
top:20px;
bottom:0px;
right:0px;
left:0px;
}
maybe this is what you need..
EDIT sorry misread the title.. corrected :O how ever if you wish to have multiple div2 the you might need a structure like
<div id="div1"></div>
<div id="div2" style="overflow:auto">[multiple div2 go here]</div>
I tried this out, adding a little sample text to your div, and got rid of the scroll bar simply by not giving the second div a height, and allowing the broswer (both IE and FF) to figure out for itself what hieght to give it.
However, given your comment to George, I think this may not be your fix either. Perhaps you could post a little bit more of your code (or psuedo-code) to give at least one typical example of the second div being replaced.
There is an easy way: Place the first div (20px) inside the second.
EDIT: Since my first answer is not an option for you, you can use scripting to resize the div on the fly. You can caclulate document.height - 20px and apply the result as the height of the "100%" div. CSS does not offer a way to do:
height: 100% - 20px
However, Javascript does:
(via jQuery:)
$( "#big_div" ).height( $( document ).height() - 20 );
It is possible without any Javascript if you can provide a fixed width:
http://jsfiddle.net/mNNeq/47/
The following is an excellent resource to help you with positioning content:
http://www.barelyfitz.com/screencast/html-training/css/positioning/