I'm using a div with position: fixed to overlap an image. This works fine in firefox, but not in IE8. The div just sits below the image, even if I play with the top and left parameters.
Example of my Problem
Is this a known bug?
This is not the only way but should give you good starting point at least.
http://jsfiddle.net/lollero/EREc7/ - Parent element that has position: relative; makes sure that the element with position: absolute being the overlapping div would stick with the image no matter where you put the image.
http://jsfiddle.net/lollero/EREc7/1/ - The same with border
You can also do something like this:
position: relative;
z-index: 4 /* The higher the number the higher the element is. make sure to*/
top: -50px;
left: 0px;
And something like this:
http://jsfiddle.net/lollero/EREc7/3/
Note that the first one is the most flexible one.
Here's a bit bigger example
http://jsfiddle.net/lollero/EREc7/4/
Examples from the comments:
http://jsfiddle.net/lollero/nBk79/1
http://jsfiddle.net/lollero/nBk79/6/
Use z-index if you're talking about layering over one another. Then you can adjust them where you want and put one on top of the other.
Related
I'm having and issue using an html document with style controlled by an externally linked css. I'm rendering locally and have tried both chrome and firefox.
This issue is this:
I have two <div> elements both with height and width values of 200px (I'm placing colored squares onto the webpage). However their position attribute values differ. One's "absolute" the other's "relative". I'm essentially trying to lay the two boxes on top of each other. For example (in the css file)
#item1{position: absolute; left:300px; top: 300px; z-index: 1;}
#item2{position: relative; left:300px; top: 300px; z-index: 2;}
item2 will be offset from item1 by 8 pixels, down and to the right.
I've tried setting all margins (and padding) to zero on item2 but didn't work.
Thanks!
You need to use position: absolute; for both divs.
Try changing item2 to:
#item2{position: absolute; left:308px; top: 308px; z-index: 2;}
Both divs must be positioned absolute if you want to place one div on top of the other.
Get to LearnLayout.com/position.html right away to understand and solve this. Then read through the entire site (it won't take long and you'll thank me) -- it's the best site I've ever seen on everything that frustrates people about css. It will save you hours and days in the long run.
I'm having trouble with the order of layered DIV elements. I have a DIV .lens-flare that's at the bottom of the hierarchy in HTML. Yet when I transform: translate the position so it encompasses the entire parent DIV, it shows above elements that are above it in the hierarchy.
So I tried setting z-indexes, and then turned my translate into translate3d. Still I'm not able to get .lens-flare underneath .top-nav-bar, .nav-bar, or .cta.
Currently I have a pointer-events: none applied so I can at least click on the things underneath. But how can i actually move the .lens-flare layer under everything else successfully?
Here's my CodePen for the project
Elements rendered later are considered being closer to the screen than the elements rendered before them.
Z-index is the answer if you want to change this, you just need to remember z-index works only with elements that are positioned.
.lens-flare
position: relative
z-index: 1
.nav-bar, .top-nav-bar, .cta
position: relative
z-index: 2
Your corrected codepen: http://codepen.io/sEvher/pen/doyWoW
When trying to use the right tag in CSS it does not work as I might expect. I was trying to make a page where one div would be so many pixels from the left, and extend 100% of the way to the right by using
left: 200px;
right: 100%;
This has worked before but for some reason it does not work now becuase the box that is drawn is only 75 - 100px in width. I have no width tag defined and I also have no height tag but instead a top tag with no bottom tag to match (unsure if that helps)
Any ideas? Or is more information required?
right value means distance from right edge of nearest positioned ancestor element to right edge of positioned element.
right: 0 is probably what you need instead of right: 100%.
Using position:absolute; right: 100%; will push left 100% out of the parents width.
http://codepen.io/Nunotmp/pen/wdKAx
I'm not sure what tags you are using, but it may be an issue of the display value being inline or something other that block.
I don't think it is going to work for you to use the left: 200px this is the result that you'll get with that: http://jsfiddle.net/Ltvkg/
You might try something like this though: http://jsfiddle.net/Ltvkg/1/
I set up 4 bocks in perfect allignment using absolute positioning. My understanding is that this is that you basically setup the x,y location of each block using top, left and the parent element is the origin. All worked as I expected and I marvelled at how nice things worked. Than I hit the zoom button in IE 9 and although the y coordinates maintained there state...the x cooridanates shifted to the left..some even past the parent element..which makes even less sense b.c. I did not specify any negative values. Why would zooming effect the absolute positioning?
Zooming changes the size of these elements but not it's position. But I don't know how to prevent that, I think you cannot do anything against that because it's caused by the browser.
The only possibility is maybe checking the size with JavaScript, maybe it's possible to recognize this with JS, but that would be very difficult. Anyway, is it important that it works while zooming?
If your 4 blocks are identical in height and width, you could do this:
div.block { height: 200px; width: 400px; float: left; }
Then put them into a container that only allows two blocks side by side.
Example Fiddle:
http://jsfiddle.net/u5xVa/
Your absolute positioned elements are currently positioned relative to the <body> tag's top/left position (which is always 0px/0px).
But you have a centre aligned layout, with margin-left: auto; margin-right: auto; and you want the absolutely positioned elements to line up with that perfectly.
Say you use zoom to make the page smaller by 50%. This will reduce the left position property by 50% and reduce the width of the margin:auto; element by 50% (triggering the left/right margins to be increased by whatever the width change is!).
So, zooming the page smaller makes the margin on the centred element bigger but it makes the absolute position coordinates smaller.
To make it line up perfectly, you need to make the absolute positioned elements relative to the element with margin-left: auto;.
In your specific example I would do this:
div#Ab1
{
position: relative;
}
div#Ab1_2
{
position: absolute;
top: 80px;
right: 0px; /* note: setting a right position, not a left position */
}
/* and do the same for div#Ab1_4 and div#Ab1_4_under */
Does that make sense?
PS: the reason it worked locally and then was broken when you uploaded, is you probably weren't viewing the page at the default zoom level on one of them.
There are many ways to do this right...but what I ended up doing and what makes most since to me is to set up an x-y coordinate plane and position your elements using margins or top and left attributes. To do this I set the parent div to relative positioning to make it register as the "origin" and then set my four square divs as absolute positioned. This works well. What through me off is that you have to set the parent div of you your absolution positioned elements to a non-static positioning.
Don't avoid tables if they are they right way to go - aligning 4 blocks left to right, top to bottom, is easiest done with a table, imho. You can use div with float left and right and junk like that, but the cells in a table never shift out of alignment.
Every time I try to use z-index in a webpage to change the order of stacking overlapping divs, I seem to run into a problem where the div that is being forced lower becomes unresponsive to mouse events.
In my current situation I have:
<div class="leftcolumn">
<div class="leftbar"></div> <!-- a 95px wide bar on the left -->
...
<h3>header</h3> <!-- a little header sitting inside the leftbar
...
</div>
By default the h3 isn't showing - it's hidden behind the leftbar. If I add z-index: 5; to the h3, it still doesn't show.
So I add z-index: -1 to the leftbar. Now it's hidden behind the leftcolumn - but at least h3 shows.
So I add z-index: -2 to the leftcolumn. Now everything looks right - but you can't click on anything inside leftcolumn. The mouse cursor doesn't change from an arrow.
I get this exact behaviour in both Chrome and Firefox. IE7 doesn't show the leftbar at all, but at least stuff is clickable.
So, am I misunderstanding z-index, or is there a bug in both FF and Chrome here? Can z-index be effectively used for this kind of stuff, or do I have to find another way?
(I can change the HTML, but the less, the better.)
Ok, 10 seconds later I discover that using only positive z-index'es makes the problem go away. Perhaps negative z-index means the object is below the level that the mouse cursor notionally lives?
Do you know that in order for z-index to work right, you need to position your elements, even if they're simply position: relative (which doesn't change their position any but allows you to use z-index). That way, you should be able to give leftbar a position of, say, 2 and your h3 a position of, say, 3. And your h3 should be on top.
You can use any position type as long as you have one.
For recap:
#leftcolumn { position: absolute; z-index: 1; }
#leftbar { position: relative; z-index: 2; }
h3 { position: relative; z-index: 3; }
Even though the leftcolumn content is visible, the leftbar div is now sitting on top of it, likely with a transparent background. Ideally you would want to modify the HTML so that the H3 resides within the leftbar, but if that is not an option, you may need to apply z-index to specific elements within the leftcolumn in order to pull them above elements in the leftbar.