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.
Related
is there anyway to set the position of a common div on the bottom of the page, without pushing it out of its container, without setting container's height and absolutely without setting its position to absolute?
I mean, i'd like to set a div(alpha) to the bottom of the page, but it's contained in another div(beta), and i was wondering if there's any way to push alpha down and make it reach the bottom allowing beta to continue containing him?
this is my situation
<div class="beta">
<tons of divs></tons of divs>
<div class="alpha"></div>
</div>
and this is what i would like to obtain http://codepen.io/anon/pen/BNYVZE
BUT without setting:
beta display to flex;
beta height;
any help would be much appreciated >.<
Theoretically you can set margin-top: (whateveryoulike)vh on your .alpha elementlike here http://codepen.io/rokki_balboa/pen/rVJKJy,
but the best practice would be set position: relative; on .beta and position: absolute; bottom: 0; on .alpha
.
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'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.
I want an HTML element (let say a span or div) to be present on the page, but not take up any space, so I can switch on and off the visibility property, and nothing moves but the span disappears.
for example take a table. I want an 'edit' label to show at each row, when I move the mouse over. But I don't want it to take up space from the table width. I just want it to 'float' beside the table.
Any ideas how to achieve this?
I can not to use javascript. So I'll be very glad if this is possible with CSS only.
I have tried to use float, its not good because no element overlaps with it. (And i do want overlapping.)
I think you're after a CSS Tooltip. Here's an example of one:
http://psacake.com/web/jl.asp
div {
position: absolute;
left: 100px;
top: 100px;
}
This will take the div and position it relative to the first containing element with position other than static. If you have an item with a position of static (the default) or relative, it will affect the document flow and hence the position of other elements. If you set the position to absolute, it takes it out of the document flow and lets you 'drop' it onto the page at whatever pixel position you like. :D
Css position property
Without using javascript i suppose you could use CSS :hover. Like this:
<style type="text/css">
#world { display: none; }
#hello:hover #world { display: block; }
</style>
<div id="hello">
hello
<div id="world">world</div>
</div>
Demo: jsFiddle
The "float" property does not "float" an object over the other elements. It "float"s the element to one side or another.
To put an object over another object, use the z-index property combined with the position property.
z-index: 500;
position: absolute;
left: 50px;
top: 50px;
You can achieve this effect by making an additional column on the edge of your table that is invisible until its row is hovered over. You want to use visibility, not display, to hide and show because visibility maintains the allocated space of the cell.
Demo: http://jsfiddle.net/sCrS6/
You should be able to easily duplicate the code to make it work for your particular page.
This method also has the advantage of working more consistently across web browsers than using positioning, which often starts to have weird in IE behavior after a couple of elements are nested.
I have multiple divs in my webpage. there is this javascript slide show and i have put a menu over that slideshow and positioned the div absolute. I have formatted the order with z-indexes. They work perfect in firefox but Internet Explorer does not work on that. what can be the solution.
Thanks in advance.
If you have a full page wrapper div anywhere or can make one or there is an ancestor/parent div you can freely alter,...
Explicitly state position: relative; or position: absolute; and either way also set z-index: 0; or the lowest value you can use.
Also some browsers (especially some IEs) allow a smaller range of z-index.
For sure values between 1 and 100 are safe. Probably more like 1-255 but I vaguely recall some old issue,...