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.
Related
I have this UI element that opens a tooltip/popover thing when clicked. I would like the tooltip window to appear right below the UI element, but on mobile it should be aligned to the left and right side of the viewport instead of being centered under the "more…" button.
In other words, I would like to have:
.tooltip {
top: 100%; // appear right below the button
left: 10px; // 10px *from the edge of the window*
}
Is there a way to mix referentials like this? Have the top position be calculated based on a parent, while left and right are calculated based on the viewport?
(by the way I know I can do this with JavaScript but I wanted to look for a pure CSS solution first)
The best solution I have so far is to make sure that the parent that has position: relative and acts at the referential for the absolutely positioned tooltip spans the whole width of the viewport. This works but it means the tooltip can't just be a drop-in component that can be added anywhere in your app, which is what I was trying to achieve.
It’s possible with an extra parent element around the tooltip to position it vertically.
Working demo: https://codepen.io/paweldecowski/pen/vYXaXvN
<span>Anchor
<div class="tooltip-parent">
<div class="tooltip">Tooltip</div>
</div>
</span>
.tooltip-parent {
position: absolute;
left: 0;
right: 0;
}
.tooltip {
left: 10px;
position: relative;
}
Edit:
Actually, this will work without the parent element, too. Just position the tooltip absolutely:
.tooltip {
left: 10px;
position: absolute;
}
The tooltip will by default stick to the bottom of the anchor. Of course, you won’t be able to use top or bottom properties because they will be relative to the viewport, but you can adjust the vertical position with margin.
I have a fixed object positioned within a relatively positioned parent. The parent moves as you scroll down the page, and the fixed object stays in a particular spot on the page. The problem is that the fixed object is visible regardless of where the relatively positioned parent is positioned.
Is there any way to clip fixed objects to their parents?
I've been searching for a work around, but I can't find one.
Because a fixed position element is fixed with respect to the viewport, not another element. Therefore since the viewport isn't cutting it off, the overflow becomes irrelevant.
What you are asking is not possible by design. try using position absolute instead of fixed.
Look at this table about positioning, copied from www.w3schools.com:
static >> Default. Elements render in order, as they appear in the document flow Play it »
absolute >> The element is positioned relative to its first positioned (not static) ancestor element Play it »
fixed >> The element is positioned relative to the browser window Play it »
relative >> The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position Play it »
inherit >> The value of the position property is inherited from the parent element
I think what you're looking for is position: absolute instead of fixed. A fixed position is always fixed to the viewport, whereas absolute positioning is based on the closest positioned ancestor.
Here's a fiddle that shows this behavior: http://jsfiddle.net/8u7aZ/
HTML:
<div id="parent">
Some text.
<div id="littleChild"></div>
</div>
CSS:
body {
height: 1000px;
}
#parent {
position: relative;
width: 200px;
height: 200px;
border: 1px solid #000;
}
#littleChild {
position: absolute;
bottom: 10px;
right: 10px;
width: 10px;
height: 10px;
background-color: #000;
}
(I only set the body height to 1000px so that the box would scroll and show the positioning.)
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"
}
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
<style type="text/css">
.a {
border: 1px solid #000;
position: relative;
}
.b {
background: #F93;
position: absolute;
top: 50px;
left: 50px;
}
</style>
<div class="a">
<div class="b">test</div>
</div>
a's height doesn't autoresize with it's content(beause b has flow), but how to resolve this problem, use css possible, not javascript.
If you are expecting to see your a-div resize, then I think you've misunderstood something. When you set an element to be absolute, you're taking it out of the "rendering flow", which means it won't interfere with any other elements on the page.
In the absolute positioning model, a box is explicitly offset with respect to its containing block. It is removed from the normal flow entirely (it has no impact on later siblings). An absolutely positioned box establishes a new containing block for normal flow children and absolutely (but not fixed) positioned descendants. However, the contents of an absolutely positioned element do not flow around any other boxes. They may obscure the contents of another box (or be obscured themselves), depending on the stack levels of the overlapping boxes.
You see the following documentation: Absolute positioning
When you have a Div with position:relative, you can control any absolute element inside. In fact, absolute Div is out of the flow of the normal document as Greg mentioned above. As I see you set left and top for b and then if you set width of a to 60px like this. Your <div class="b"> is outside the parent box. This is how absolute elements work.
Try "float: left;" in both classes. Didn't test, however. In wich browser are you testing?
if div b is positioned absolute it's not considered 'inside a' anymore, because it's not rendered inside of it.
so div a will not resize as div b gets larger or smalller...
By setting position: absolute you're taking the div outside the normal document flow, which is why the container won't resize to contain it.
Did you want to set margin-top: 50px; margin-left: 50px; instead?