I have a div which is position:fixed so that it it always in the center of the browser viewport.
Inside of that div, I have another div that is currently set on position:absolute. My understanding is that this inner div is actually being positioned relative to the html document since there are no absolute or relative parent elements.
I'm not sure whether all that is exactly right -- but anyway, I need the inner div to also stay centered to the viewport while at the same time staying put relative to its parent container. They need to move together coherently while both staying viewport-centered.
I attempted using position:fixed and position:relative on the inner div but neither seem to be working out. They do not move coherently together.
#outer-div {
width: 100%;
position: fixed;
top: 50%;
z-index: 100;
}
#inner-div {
top: 35%;
left: 30%;
position: ??? ;
}
Thanks!
You can't center the inner div with the viewport using absolute positionning while staying relative to his parent container. Why not using margin: 0 auto on the inner div? That way, it will be centered in the outer div, which is absolute positioned in the middle of the viewport. Everything would be centered that way, no?
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.)
It is possible to use position:absolute and left and right on the middle column to set where it ends in relation to the parent div.
However I'd like to be able to have the left side of the center div to start right where the left column ends, and for the left column to be adjustable (based on its content).
This seems like a really basic thing but from what I understand there is no way to do this without flexboxes. Is this true? Is there nothing I could do with clever nesting of semantically superfluous elements and certain styles set to auto?
If the right div has some set width (either in % or px), then yes, you can let the left div's width be defined by its content while letting the center div fill in the remaining space:
#right {
position: absolute; /* position in top right corner */
top: 0;
right: 0;
width: 80px;
}
#center {
margin-right: 80px; /* same as #right width */
}
#left {
float: left;
}
jsFiddle DEMO
From what I can tell you'd be better off with simple floated blocks. If you wanted to absolute position all of them together, you could wrap them in an absolute container, and float them inside. Maybe I just don't understand why you need them absolutely positioned, but this seems like a viable option.
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