Z-Index Not Working - Alternative Technique or Fix - html

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.

Related

positioned elements disappear under next positioned element in the flow in MSIE7

sometimes got into this problem but I have always avoided it using some alternative code.
Unfortunately, this time I need a hand.
in IE7 if two brother DIVS have "position:relative" absolute-positioned children of them disappear under the "next brother DIV"
http://jsfiddle.net/qN74X/
<div style="width:200px;position:relative;background:yellow;">XXX
<div style="position:absolute;z-index:1;background:red;
height:70px;top:0;left:50%;">ZZZ</div>
</div>
<div style="position:relative;width:200px;background:pink;">YYY</div>
how can I solve this?
thanks
When hovering over the element, set it's z-index as well (not just the tip). Here's the main change:
body > div{
position:relative;
z-index:1;
}
body > div:hover{
z-index:5;
border:0 none;
}
Basically, on the outer container (where the background was) was what needed to have it's z-index changed. I am also unsure of why I needed to put border:0 none but without it, it didn't work.
jsfiddle: http://jsfiddle.net/qN74X/3/

Fixed div background

I want to create a layout where I want to display an image to the left and content on the right. The image should stay constant when the content scrolls.
The css I'm using:
<style type="text/css">
#page-container
{
margin:auto;
width:900px;
background-color:Black;
}
#header
{
height:150px;
width:650px;
}
#main-image
{
float:left;
width:250px;
height:500px;
background-image:url('../images/main-image.png');
position:fixed;
}
#content
{
margin-left:250px;
padding:10px;
height:250px;
width:630px;
background-color:Teal;
}
</style>
The HTML:
<div id="page-container">
<div id="header"><img src="someimagelink" alt="" /></div>
<div id="main-image"></div>
<div id="content"></div>
</div>
Alot of time on this site and I have understood that background-attachment:fixed positions the image in the entire viewport and not the element it is applied to.
My question is how do I go about creating that kind of layout?
I do not want to give that image as a background image, as if the window is resized, it might get hidden. I want scrollbars to appear if the window size is less than 900px( my page width) so that the image can be viewed at all times.
That happens with this code, however I would like the image to start at my element instead.
How do I go about doing this??
Thanks in Advance :)
Edited:
I took the advice and added a position:fixed property to #main-image. Using the HTML and CSS as shown above.
Now, I also want to fix the header so that it does not move. Basically, only my content section should scroll.
However, if I add a position:fixed to the header, my #main-image and #content now sit on top of my header.
If I add a margin-top:150px (since my header height is 150px) to the #main-image, it works fine and moves down appropriately.
However if I add a margin-top:150px to the #content, my header moves down by 150px and still sits on top of my #content.
Can someone please explain why this is happening?
Thanks in Advance :)
Take a look at this link:
http://www.barelyfitz.com/screencast/html-training/css/positioning/
You can learn how to position Div's with it.
This will solve your problem:
#main-image {position:fixed;}
EDIT:
I'm not sure of what caused your problem but here is the solution:
#content{
position:relative;
top:150px;
}
My Guess:
I think that happened because when using position:fixed those 2 div's were positioned relative to the the browser window, while the other one was relative to the document itself.
In this link you will see more about positioning and you can test some of these features related to the position property:
http://www.w3schools.com/cssref/pr_class_position.asp
About the fact that one div was positioned over another, you should search for the 'z-index' property. Firefox has a 3D mode so you can see this more clearly:
http://www.addictivetips.com/internet-tips/browse-internet-in-3d-using-mozilla-firefox-11-tip/
Set a min-width on html and body.
Have you tried setting your #page-container to relative and your #main-image container to absolute and setting the position using top, bottom, etc. Then you should also be able to float your #content container to the right.

How do I make a header that remains in the top at all times?

I want to make a header like http://www.chacha.com (doesn't move, is about that wide and that height, and able to fit divs inside it and also has to be an image)
I am starting off with a blank html document and a blank css page, so there I haven't currently written any code.
I've been trying two days straight to do this now so I would really appreciate any help anyone can provide.
I have gimp so if anyone could also give me image dimensions for a perfect header and perfect background size I would appreciate it even more.
CSS:
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 10px;
background: url(yourimage.png) repeat-x;
}
<!--html -->
<div id="header"></div>
That should give you a starting place, I can't tell you more without seeing exactly what the layout's supposed to be.
The CSS property you're looking for is position: fixed which will position the element relative to the viewport. This is good breakdown of positioning: https://developer.mozilla.org/en-US/docs/CSS/position
In this specific case, what you've got is an element with styles roughly along these lines:
#header_id {
position: fixed;
width: 100%;
height: 35px;
}
You don't have to set the height, but unless there is content in the fixed element, it will collapse if there is no height specified. They also appear to have put a drop-shadow on the element toget the neat floating effect.
If you want to have an image inside, you can just put the <img> inside the header element, or use it as the background-image url in the CSS and position it with background-position (see also: https://developer.mozilla.org/en-US/docs/CSS/background-position although the compatability table at the bottom is important if you want to do anything too specific with this property).
You can do this with any block-level element (or any element with display:block set on it). In your example they are using the HTML5 <header> tag; a <div> would work, too, if <header> wasn't appropriate for your page.
I would recommend using the Firebug addon with Firefox (or similar developer consoles with other modern browsers) -- you can right click on an element on the page and select 'Inspect element' from the dropdown menu and get a breakdown of both the markup and styling to see how other websites are constructed. Very useful for when you're browsing the internet and you see something and think, 'that's a neat trick, how does it work?'
FOR FULL WIDTH FIXED HEADER
header {
width:100%;
background:green;
height:60px;
margin:-8px;
position:fixed;
}
FOR NONFULL WIDTH FIXED HEADER
Create a div and set width and height (you can also set it left or right by float:left, float:right)
then in this div put the code above but without margin:-8px; and change the width to the width that your div has.
Here is a test

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 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:
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.