I've been writing CSS for quite some time now.
I've noticed that
<div style="position: relative; right: 20%; bottom: 20%;">some text</div>
never works!
relative positioning would work with left and top specified but not with right/bottom. Why?
A quick fix around this is to use "absolute" instead and specify right/bottom in pixels, but I need a reason.
Also, correct me if I'm wrong. Irrespective of whether the external container is positioned absolutely or relatively, does it not make much sense to position something "relative" to the boundaries of that container or should elements inside a container always be positioned "absolute"?
Thank you.
From Absolute vs. Relative - Explaining CSS Positioning
Relative positioning uses the same four positioning properties as absolute positioning. But instead of basing the position of the element upon the browser view port, it starts from where the element would be if it were still in the normal flow.
Relative positioning does work with bottom/right values, just not the way you were expecting:
http://cssdesk.com/RX24j
Think about the position values on relative elements as margins, that the surrounding elements simply ignore. The "margins" will always move the element relative to it's previous position in the normal document flow, but remove it from the normal flow at the same time.
When out of the normal document flow, the surrounding elements act as if it were in it's original position in the normal flow... but it's not. This is why a relative element can overlap it's parent (like in Rel 1).
Did you try this?
<div style="position: relative; right: -20%; bottom: -20%;">some text</div>
or rather
<div style="position: relative; right: -80%; bottom: -80%;">some text</div>
not recommended :
left : 0% //will set it to left
left : 100% //will set it to right => you need to get the width of the element and subtract it using calc ( 100% - width)
To people visiting this old post...
if the element that you are trying to position inside something else has a width or height that is larger than the outer element. The position will ignore left, right, bottom, left.
give it width/height auto.
that was the problem that I had. Hope it helps you too!
remove position left, right, top, bottom from the parents element
and put it in the child as you want
.parent_class
{
background: #ff0000 ;
position: absolute;
transition: 0.8s ease-out;
left:0; //" remove this from here"
top:0; // " remove this from here"
z-index: -1;
}
.child_class
{
width: 0px;
height: 70px;
right: 0; //"now it will work"
bottom: 0;//"now it will work"
}
Related
When I apply relative positioning to image it doesn't going to the right. But when I use absolute positioning everything is OK. I can't seem to figure out why relative positioning doesn't work. Any help is appreciated.
img {
display: block;
position: relative;
top: 0;
right:0;
}
<img src="http://img.jgi.doe.gov/images/img-user-forum.png">
You need the elements to be displayed inline. For this set the display property to inline-block for both the images and use floats to position the second image relative to the other. I suggest reading up some good material on CSS positioning and element types.
img {
display: inline-block;
position: relative;
top: 0;
right:0;
}
.one {
display: inline-block;
position:relative;
float:right;
clear:right;
}
<img src="http://img.jgi.doe.gov/images/img-user-forum.png">
<img class="one" src="http://img.jgi.doe.gov/images/img-user-forum.png">
Relative positioning does not work with bottom or right because :
Relative positioning uses the same four positioning properties as absolute positioning. But instead of basing the position of the element upon the browser view port, it starts from where the element would be if it were still in the normal flow.
So, right would make the element offset from the original position(ie. the edge of the first image), not the edge of the container.
The use of left, top, right, bottom in relative block elements will not align the elements according to the parent relative element, BUT related to the normal element position - TO ITSELF. So top: 0 means it will move 0px from the normal position. It will stay there. Relative to left:0 means exactly the same thing - 0px distance from the normal element position.
On the other side, absolute elements relate to the parent relative element, not to the actual normal position of your img. So that's how it works and stays top right.
I have a fixed position element inside a relatively positioned element, as far as I'm concerned the position: relative element shouldn't have any effect on the position: fixed (fixed elements are positioned relative to the window, right?).
However, the fixed elements z-index seems to be inherited by it's parent, to the point where it's z-index can be no higher than its parent's z-index.
I hope I'm making sense? Below is a HTML example of what I'm talking about:
.outer {
position: relative;
z-index: 2;
}
.inner {
background: #fff;
left: 50px;
position: fixed;
top: 40px;
z-index: 1000000;
}
.fade {
background: #555;
bottom: 0;
left: 0;
opacity: 0.5;
position: fixed;
right: 0;
top: 0;
z-index: 3;
}
<div class="outer">
<div class="inner">testing testing</div>
</div>
<div class="fade"></div>
If you change the following:
.outer { position: relative; z-index: 4; }
Then the .inner element appears in front of the fade element.
I find this behaviour very peculiar... is there a way of working around this without moving the .inner div, or changing the CSS of the .outer div?
Fiddles of above code samples:
http://jsfiddle.net/n2Kq5/
http://jsfiddle.net/U8Jem/1/
In short, yes, an element with position:fixed is limited by its parent's z-index given the parent's z-index is defined.
Sad to inform you, but what you want is not currently possible. The only way you can get the effect you desire is to change your HTML or remove the z-index from outer.
Changing HTML options
The first option is to move inner outside of outer, which would look like this.
The second option for an HTML fix is to move fade inside of outer (using the same CSS even) - demo of that here.
A third option would be to put fade inside of outer and then also put inner inside of fade, but that requires you to use rgba colors and opacity - that demo is found here.
Changing CSS options
The closest thing you can get using the same HTML you have currently is to remove the z-index of outer - Demo here. You would think that you could simply increment each element's z-index by two, but that does not work due to the fact that children elements cannot have a higher z-index than their parents (if the parent's z-index is set).
Explanation
If you think about it, fade and outer are on the same level. What you're trying to do is have fade remain on that same level but also have it be on the level above, which is impossible. It's like trying to be on two floors of a building at once, it can't be done.
Although what you need is not directly related to this article, Philip Walton created a great post on z-indexes and the effect opacity has on them, which could be useful to others looking at this question.
Please refer to my site Vault X
I have been trying to make the light switch next to the vault a clickable function.
However, I cannot get my div to stay fixed on this position (adjusting the window size causes it to move about).
What is the best way to achieve this?
Doing position:absolute (or more appropriately here position:fixed) specifies a elements position outside the normal flow of the document relative to the first parent that has a position other than static (in this case (and always with position:fixed) the browser window).
As such, since youve specified a top and a right position, these values are fixed. When you move the right border in, the distance from the browser viewport must stay the same, so the element moves.
You can try positioning from the left, but that will only guard against resizing from the right (if I drag the left corners in, the element will move)
Alternatively, you should position this element statically within the document, within your #wrapper div so that resizing the window has no effect on document flow.
Because your graphic is anchored to the horizontal center of your page, you can use the same center, then offset.
#switch {
height:50px;
width:50px;
background: #F00; /* Just so we can see it */
position: absolute;
top: 150px;
left: 50%; /* Put the left edge on the horizontal center */
margin-left: 148px; /* Move it 148px to the right of the horizontal center, placing it over the lightswitch */
}
What you need to do is, think about where you want the element to be (fixed will stick it in a coordinate location X/Y, absolute, will move with the document, relative is quite clearly relative to where it is).
So with that said, I would recommend creating an 'anchor point' using
<div style="position: relative;" class="anchor-point">
<div style="position: absolute; top: 100px; right: 50px;">
<img href="" />
</div>
</div>
The anchor-point means you can stick this element in an area of your page, the inner part, with position:absolute; lets you move FROM your anchor to anywhere you want (top/right/left/bottom), combine this with z-index to layer your elements just how you want it.
This will guarantee that your element (that is pos:abs) will stay where you want it.
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
I have the following mark up:
<div id="playArea" style="position: relative;">
<div style="position: absolute; left: 295px; top: -1px; width: 313px; height: 269px;">Hello</div>
<div style="position: absolute; left: 63px; top: 35px; width: 80px; height: 42px;">World</div>
<div style="position: absolute; left: 534px; top: 329px; width: 183px; height: 251px;">Bye</div>
</div>
But i would like to have a paragraph of text under the 'playArea' div, but because all the divs inside playArea is absolute, the text doesnt appear at the bottom of the last absolute positioned div.
I have looked into this and found an alternative by using float:left and clear:left however after using this method on the first div, you cannot position the div correctly as the starting point of the second div is under the first div and not at (0,0). Any ideas of how i can get by this.
Thanks
If I understood correctly, you just have to give the "playArea" div the right height.
Edit: I mean, the combined height of everything inside it.
But i would like to have a paragraph of text under the 'playArea' div, but because all the divs inside playArea is absolute, the text doesnt appear at the bottom of the last absolute positioned div.
As you seem to know all the dimensions and positions already, just add another absolutely positioned div to it and put the relative content in it.
I have looked into this and found an alternative by using float:left and clear:left however after using this method on the first div, you cannot position the div correctly as the starting point of the second div is under the first div and not at (0,0). Any ideas of how i can get by this.
You need to remove position: absolute to get the floats right. Just width and height are enough.
Float the three inner divs left, put overflow: hidden; on the playArea div and put your <p> under the three inner divs with clear: both;
After reading the comment thread between you and "BalusC", it appears that you have modified your CSS and are now trying to float your items, and use margin-top and margin-left for positioning. You are totally able to do it that way, but you are forgetting that you can also use negative margins to position your elements as well. For example if you use margin-top:-10px; then it will pull the element up (instead of pushing it down, like a normal positive valued margin). The same goes for all of your other margins.
That seems to be the missing ingredient for you now.