I want to place an element in bottom left corner of another, element. I give position:relative to the parent, and position: absolute; bottom: 0; left: 0 to the child.
The problem is that the page can be loaded in ltr or rtl. In case of RTL, the child element has to be in the bottom right corner of the parent.
Many CSS properties have bidi equivalents, such as margin-left goes to margin-inline-end. Is there a bidi equivalent of left CSS property
MDN points to inset-inline-start as logical equivalent of left
Related
I understand that you can declare position:relative in a div element. Then, if you declare position:absolute in a child block element, you can then use top, left, bottom and right to position that element "relative" to the parent element which was declared as position:relative
In the CSS code I inherited I'm seeing a combination of position:relative and say top or left in the same declaration. Is this a mistake? And if so why would it be used?
css top, left, right, bottom are applicable to all the positioned elements (i.e other than position:static).
Example
From the MDN article on top:
For relatively positioned elements (those with position: relative), it specifies the amount the element is moved below its normal position.
Basically the top/right/bottom/left properties move a relatively-positioned element a given distance from where it would be normally placed.
In class we learned that if I have two divs: a wrapper div (let's call it div A) that's defined as position: relative; and another div, div B that's inside div A with position: absolute;.
What will happen is that now the position of div B is dependent on the position of div A. Meaning that now the point 0,0 of div B is not the point 0,0 of the browser, but of div A. So, if I was to move div A say 20 pixels to the right, and div B 30 pixels to the right, div B would be 50 pixels to the right of the browser's point 0,0;
Now, my question is: what if I have 3 divs. Div A that's position: relative;, within it div B that's position: absolute, and within div B, another div (div C) with position: absolute;. Now, how will div C behave? Will its position 0,0 be that of div A or div B?
Thanks in advance.
code:
<style type = "text/css">
#a {
position: relative;
left: 20px;
}
#b {
position:absolute;
left: 20px
}
#c {
left: 20px
position:absolute;
}
</style>
<div id = "a">
<div id = "b">
<div id = "c">
test
</div>
</div>
</div>
As you can see from this JSFiddle, the position of "C" div is relative to its father "B" with
position: absolute;
I don't have much to add to both these great answers, but here's an article that helped me understand the concept. http://alistapart.com/article/css-positioning-101
EDIT:
That article covers that a div with position absolute is positioned on the inner grid of its closest ancestor(parent, grandparent, etc.) that is fixed, relative, or absolute. If there is none it is relative to the html document, but note it still behaves differently than fixed. It also covers the key differences between the three position types as well as the static position type.
static - this is the default position it creates no grids for children absolute positioned divs. You can't use the css properties top left right or bottom.
relative - creates a grid for descendent(children, grandchildren, etc.) absolute positioned divs. You can use top, left, right and bottom, but they move it 'relative' to where it was previously at. When using top, left, right, and bottom other elements still go around where it was previously at.
absolute - creates a grid for descendent(children, grandchildren, etc.) absolute positioned divs. You can use top, left, right and bottom, but they move it relative to the closest ancestor(parent, grandparent, etc.) grid. Remember the grids are created by fixed, absolute, and relative elements. When using top, left, right, and bottom the element goes out of the flow of the document. (this means other items go through it.)
fixed - creates a grid for children absolute positioned divs. You can use top, left, right and bottom but they move it relative to the browser. When using top, left, right and bottom goes out of the flow of the document. (this means other items go through it.)
Div B - any absolutely positioned element is positioned according to it's closest positioned (absolute, relative, or fixed) parent.
It's a matter of personal preference, but this article was the one that cleared things up even more for me than the AListApart one: http://learnlayout.com/position.html
When i try to override an element style position top and left by setting right or bottom
It is not working , left and top properties are only in the browser's concern and never see people use right and bottom properties where can I use the those properties efficiently.
If there's no specified height or width, and the element in question has position absolute or fixed, then specifying both a top and bottom (or left and right) actually means something — you might want a lightbox to be 20 pixels from each edge of the body for example, and occupy all the remaining space.
However with relative positioning, or when other specified dimensions make the calculation impossible, then specifying distances from both edges will result in a conflict of instruction, so the browser is forced to take one over the other. top and left are the natural precedence for layout (and text in Western script), so they're taken arbitrarily.
You can however reset top and left by specifying the auto value, allowing your bottom and right to take precedence:
/* previous rules */
.thing {
top: 20px;
left: 20px;
}
/* your rule */
.thing {
top: auto;
left: auto;
bottom: 20px;
right: 20px;
}
I try to override an element style position top and left by setting right or bottom
Firstly you cannot override top and left properties using right and bottom
If you want to override them you need to set the values like
element.class {
top: [auto, inherit, px, %];
left: [auto, inherit, px, %];
}
/* Don't leave them blank */
Now am coming to the second question here.
never see people use right and bottom properties where can I use the those properties efficiently
Take an example where you need a button positioned to the right and bottom of the container element and the element height and width are dynamic, so in this case you need to use right: 0; and bottom: 0; as you cannot position the element from left and top, as you don't know how much px you need to take the element from left or from top as the element size is dynamic.
You need to set your top: auto; left: auto to override your previous setting and have it use bottom right instead.
I have a link in a table cell and when the link is clicked I show a hidden div.
Currently I use position: absolute and z-index:10. It works fine, but I would like to move it a bit to the top and left. When I add top: -10px and left: -10px, the div moves to the position of the window.
How do I make it 10px off the table cell?
You need to set the parent element using position relative then use position absolute on the element you want to position. So if you want it to be positioned based on the table you need to add position: relative to the table (which won't do anything because it is already positioned relative) and position: absolute to the overlay. Absolute positioning takes the element out of the document flow and relative positioning leaves it in the document flow which is why stuff is being moved around. The reason for this is based off how CSS works: http://www.w3schools.com/css/pr_class_position.asp
relative The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position
absolute The element is positioned relative to its first positioned (not static) ancestor element
You might also be interested in fixed.
fixed The element is positioned relative to the browser window
Here is an Example: http://pastehtml.com/view/av391nzsv.html
position: relative;
instead of
position: absolute;
Relative says to measure top and left from the parent element, absolute says to measure from the top left corner of the page.
use margin-top:-10px; margin-left:-10px;
I'm trying to accomplish the following layout,
http://www.rae-mx.com/test/css-layout.jpg
and I'm almost there, except for the last green div, which is going lower and lower depending on the content of the content (white) div. If I set a value for the TOP property for the green div, and then I add some more text to the content div, the green div goes lower and lower.
Since the green div is child to the main container div, and the green div is relatively positioned, isn't it supposed to be placed specifically at the position indicated by the TOP value of it? If I'm incorrect...can someone please tell me how can i make it so that the green div is always displayed at the same spot within the container (gray) div, regardless of the height of the content/white div?
I tried to paste the css code here but was having problems with the brower. you can see the test site source/css at http://www.rae-mx.com/test
tia for the help.
I think you're misunderstanding how relative positioning works. If something is marked as position: relative then that does nothing to that element's positioning. However any descendant elements with position: absolute are positioning relative to that element.
So a basic skeleton for what you want is:
#main { position: relative; }
#menu { position: absolute; top: 10; right: 10; }
#content { position: absolute; top: 30; }
#contact { position: absolute; top: 180; right: 10; }
Take a look at Absolute and Relative Positioning. This is called relative+absolute positioning.
If you want something positioned at the same place, use position:absolute instead. Position: relative is used to move the element after it have been placed in the normal flow.
And remember: With position:absolute 0,0 is the upper left corner of the first(closest to the element, when walking from the element and to the root) parent with position:relative or position:absolute