Presuming I have a div container with position: absolute, that has 20 div children, all with position: relative (same size, colored 100px X 100px boxes). The question is how to display all child-divs overlapping each other (each on top of the other, like a deck of cards)?
There are a few questions regarding this but I need to understand the principle that can apply to any number of divs (am not totally clear on negative margins), ideally something where I do not need to recalculate the positioning for each child-div if any/all sizes change.
As the other two comments have said, i would position: relative; your parent div. Then position: absolute; all your cards. Position absolute takes the element out of the "normal flow" of the website to then allow you to position the cards over each other. You could overlap them with position: relative; however it would mean that each card would need its own individual styling to make sure its positioned over the other which would be a lot of work. see here for more info on position attribute http://www.w3schools.com/css/css_positioning.asp
Related
Given the following css
li.menuitem{
position:relative;
top:0;
left:20px;
display:inline;
I would expect each li to be positioned 20 pixels further left than it would be without position relative.
However, what happens is that as I change the value of left, all if the menu items move together in relation to the left position. In other words, the space between items does not change.
While there are other ways to achieve what I want, I am curious as to why both items move and the distance between then does not change.
Thanks,
-dmd-
Because that is what margin-left is for.
Here's an illustration: if you and I are walking side-by-side and we both take 20 steps forward, you and I would still be side-by-side.
Similarly, position: relative doesn't take into account the new positioning of other position: relative elements around it. They all move relative to where they naturally are, and not relative to where other elements now are.
The MDN entry for position: relative states:
This keyword lays out all elements as though the element were not positioned, and then adjust the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned).
.classname {
position: relative;
}
position relative in css without top right left and bottom mention,
I read that this not change any position, but in some web page write position: relative; without top right left bottom mention and if I delete "position: relative;" then position will change.
Can I know what exact use of "position: relative; " without top right left and bottom mention.
This type of positioning is probably the most confusing and misused. What it really means is "relative to itself". If you set position: relative; on an element but no other positioning attributes (top, left, bottom or right), it will no effect on it's positioning at all, it will be exactly as it would be if you left it as position: static; But if you DO give it some other positioning attribute, say, top: 10px;, it will shift it's position 10 pixels DOWN from where it would NORMALLY be. I'm sure you can imagine, the ability to shift an element around based on it's regular position is pretty useful. I find myself using this to line up form elements many times that have a tendency to not want to line up how I want them to.
There are two other things that happen when you set position: relative; on an element that you should be aware of. One is that it introduces the ability to use z-index on that element, which doesn't really work with statically positioned elements. Even if you don't set a z-index value, this element will now appear on top of any other statically positioned element. You can't fight it by setting a higher z-index value on a statically positioned element. The other thing that happens is it limits the scope of absolutely positioned child elements. Any element that is a child of the relatively positioned element can be absolutely positioned within that block.
The most known use for setting position relative on a parent element is to position child elements, set to position absolute, relative to the parents position.
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.
I have a table with many rows.
I want to have an on hover effect on the rows. When someone hovers over a row a popup div displays with some additonal information about that row.
I was planning on doing this with a div and on hover making the div visible/invisible.
Now my problem is with the html/css.
How do I make the table with a div that appears on hover but does not affect the look of the table.
I was thinking z index, with position relative. But I cannot get it working.
You should use position:abolute; top: 10px; left: 20px; z-index: 1 for the div and position: relative for the tr. (top and left are only assumptions. use these for positioning the div relative to your row)
Relative positioning the row, holds it in the context. Absolute positioning the div makes its position absolute to its parent (here the row). If the row doesn't have relative the div would be positioned absolute to the body or an parent element which has set a position.
If the elements have the same z-index then the browser will display them in the order they appear in the html. So you don't have to set z-index at all. You can do something like this DEMO. (Hover over the top left cell, or the 3rd from top in the second column.) So long as the divs you want to display are below the table in which you wish to highlight.
Is it important to use only html and css in your project ? If not you could handle the hover functionality over to Javascript.
What is the best way to position and align images on an HTML web page?
I will have approximately 10 user-controls that each have a set of images on them laid out in a specific pattern, eg - an arc, a circle, straight line, some other sort of curve.
All the images will be the same size.
How can I achieve this using best practices?
Absolute positioning is probably the way to go for something like that. With absolute positioning, you basically just define the x/y coordinates of each one. To position an element absolutely, you set position: absolute; in the CSS, and then top: 5px; and left: 5px; (that is, 5 pixels from the top, 5 from the left; you can also use bottom and right instead). Note that though it's called "absolute" positioning, which would make you think it's relative to the whole document, it's actually only relative to the first ancestor element with positioning other than static (static is the normal positioning mode). So if you wanted to contain a bunch in a parent and position it normally, you would set it to position: relative;, or you could position it absolutely as well. If no parent has non-static positioning, it will be relative to the whole page. Another thing to note, is that absolutely positioned elements don't take up any space, so for instance, if you've got a big element absolutely positioned, and the window is too small, there won't be scroll bars.