I'm trying to position the bird on this site: http://dane.helpful.ninja/fds/ inside the grey box. It should be positioned mid height.
I dont know why but it won't let me do this. Any suggestions?
Since the #birdy element has position: absolute, it is placed with respect to the whole document. You need to set a relative parent container.
.jumbotron {
position: relative; /* Add */
}
Output:
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'm having problems to make the div parent inherit the height of the div child.
.parent {
position: relative;
}
.child {
position: absolute;
width: 960px;
}
The text should be in the black gap.
Any help?
Do you need the child to be positioned absolutely for some reason?
This is why it doesn't 'fit' in your parent element.
According to the documentation
Position absolute:
Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor or to the containing block. Absolutely positioned boxes can have margins, they do not collapse with any other margins.
View the illustrations at https://developer.mozilla.org/en-US/docs/Web/CSS/position to see what exactly happens.
Remove any size attributes of the parent, it will then become as big as it needs to be for its contents.
Why have you declared position:absolute? If you want to move .child you should use position:relative or margins.
Absolute positioning removes the element from the natural flow of the document.
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.)
Can you help me with my dilemma? I have a container (BODY in this case) that has position:relative set. Inside it I have two div's. One relative and one absolute positioned (in this order).
The problem is that whenever I set some margin-top to the relative positioned element, the container's height (body in this case) stretches vertically.
For example, even though I have set height: 100% to the container, its size when viewed is 100% + the margin-top of the relative positioned child element.
Here's a fiddle:
http://jsfiddle.net/xJ75R/7/
First of all, you should not give a relative position to the body, since body takes up the whole page.
Anyway, be specific when applying the relative position to another element, so if you have a class of "lists" then use
.lists { position: relative; top: something; left: something }
or margin, or whichever rule.
If you are just having problems with the body tag after giving some margin to ANOTHER element (though I do not see how this would happen), then give the body a margin of 0, like:
body { margin: 0; }
and if that doesn't work then use !important like
body { margin: 0 !important; }
On a side note, use firebug addon for firefox to make your CSS life easier and see what's happening on the fly.
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