There is a narrow DIV which contains a much wider DIV. How do I center the child DIV horizontally within the browser window (and not the parent DIV) such that the left and right margins are equal?
<div id="narrow_container" style="float:left;">
<div id="wide_contents">
</div>
</div>
Possible CSS:
<style>
#narrow_container {display: block;
width: 600px;
margin: 0 auto;
} /* narrow div, this can be anything except position: relative */
#wide_contents {position: absolute;
width:400px;
margin-left:-200px;
left:50%;
} /* screen-centered div */
</style>
You're basically then just positioning the element absolutely relative to the window, since absolute positioning positions relative to the closest parent with position: relative. If you don't have any parents with position: relative, it will default to the document body.
The technique for centering is reasonably common and makes use of a negative margin that is as wide as half of element's width, and then positions the element 50% from the left. This results in a horizontally centered element.
Related
I have a parent and a child div. Parent has one image. Child div has another image. Child image needs to appear in top-left corner of parent image for which I thought to set position of child image to absolute and parent's position to some non-static position, say relative or absolute. (I set left and top too but let's forget about it for now.)
This is because setting absolute for the child should work only if its first ancestor is positioned non-statically as according to W3Schools absolute means The element is positioned relative to its first positioned (not static) ancestor element.
But I noticed that even if I don't set position of the parent (i.e. its position will be "static" by default), event then the child image still gets positioned nicely in top-left.
Can someone help me understand why I don't have to set position of the parent to some non-static value in order for the absolute property to work properly? or did I understand working of absolute incorrectly?
<div class="parent">
<img src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300">
<div class="child">
<img src="http://xiostorage.com/wp-content/uploads/2015/10/test.png" width="200">
</div>
</div>
/*.parent {
position:relative;
}*/
.child {
display:none;
position:absolute;
left:0;
}
.parent:hover .child {
display:initial;
}
Here is the JSFiddle code.
Update:
Connexo helped with following updated code.
Try uncommenting the position for parent to unlock the mystery. Accepted answer has more information.
<h1>
Positioning test
</h1>
<div class="parent">
<img src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300">
<div class="child">
<img src="http://xiostorage.com/wp-content/uploads/2015/10/test.png" width="200">
</div>
/*
.parent {
position:relative;
}*/
.child {
display: none;
position: absolute;
left: 0;
top: 0;
}
.parent:hover .child {
display:initial;
}
Two general rules to keep in mind:
An absolutely positioned element will be positioned within its containing block, which is defined by the nearest positioned ancestor. However, if there is no positioned ancestor, the containing block is the initial containing block (i.e., the viewport).
Your .parent div is pretty much aligned at the top-left corner of the viewport. That's why your absolutely positioned child will have similar positioning in either containing block.
When you apply position: absolute to an element you remove it from the normal flow. That's it. The element will still be positioned as though it were in the normal flow. It isn't until you apply the CSS offset properties (left, right, top, bottom) that you actually position the element.
You forgot setting top in your JSFiddle so all it did was get aligned to the left side of the page, where your image was as well. As soon as you add top: 0px in your JSFiddle you will notice that the image does end up in the top left corner of the page.
Below a simple demo with top added and a margin pushing the .parent away from the corner.
.parent {
margin: 30px;
/* position: relative;*/
}
.child {
display:none;
position:absolute;
left:0;
top:0;
}
.parent:hover .child {
display:initial;
}
<div class="parent">
<img src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300">
<div class="child">
<img src="http://xiostorage.com/wp-content/uploads/2015/10/test.png" width="200">
</div>
</div>
I am trying this:
there is a picture element Which is wrapped inside a container div
<div id="container">
<div id="a">
<img src="b.jpg" alt="b" />
</div>
</div>
Now I want to place the child elements such a way that the top and left of the picture is always 25% of the height & width of the container div. How can I achieve this?
If that is the only requirement, you can just do it by adding a padding on the inner div.
According to W3C, it those percentages should refer to the dimensions of the outer div.
Like margin properties, percentage values for padding properties refer
to the width of the generated box's containing block
http://www.w3.org/TR/CSS2/box.html
For the height, it will only work if your inner div is the only element inside your outer div (because the inner div will determine the height of the other). So for you example, it'll work.
Try this:
#container {position: relative;}
#container #a {position: absolute; left: 25%; top: 25%;}
Here's a working fiddle: jsFiddle
Try:
#container { position:relative; }
#container img { position:absolute; top:25%; left:25%; }
Live demo: jsFiddle
This is apparently contradictory. What I need is to have two child elements positioned at the left and right edges of the parent element while vertically centered and overlaid over all other sibling elements.
You can use left and right for that.
.child
{
position: absolute;
top: 50%;
}
.child .left
{
left: 0;
}
.child .right
{
right: 0;
}
The top: 50% will align the top edge of the child to halfway down the parent. If your parent has a constant size, use pixel sizing. Otherwise you'll probably need some javascript to get it exactly right.
edit in response to comment:
To make it relative to the parent instead of the page, you need to give the parent position: relative; and it will work. The default position is static and that won't work for this.
If I undestand correctly:
<div class="parent" style="position:absolute;height:70%;width:70%;top:15%;left:15%;background-color:#eee;border:solid blue 1px;">
<div class="left" style="position:absolute;width:30%;height:70%;top:15%;left:0%;background-color:black;z-index:20;">left box vertically aligned</div>
<div class="right" style="position:absolute;width:30%;height:70%;top:15%;left:70%;background-color:black;z-index:20;">right box vertically aligned</div>
</div>
see : http://jsfiddle.net/dankpiff/zmYEf/
If you set the elements underneath with a lower z-index they will be covered by the 'left' and 'right' boxes
Is this what you mean?
How should children with position: relative behave inside of a parent that has position: absolute?
For example (JSFiddle):
<div style="position:relative; float:left; min-width:900px; max-width: 1400px; height:100%;">
<div style="position:absolute; top:0; right:0; width:200px; height:300px;">
<div style="position:relative; top:0; left:0; width:500px; height:100%;"></div>
</div>
</div>
When I shrink the browser window below the max-width the inner div moves outside of its parent element. Is that normal behavior?
Try changing a few things. First, give your first div an actual height rather than just 100%. Second, try making the child element fit within its parent. Right now it's a 500px div inside a 200px div. It might be better positioned outside the parent for this specific task.
Taken from : http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
Relative [...] What it really means is "relative to itself". If you set position: relative; on an element but no other positioning attributes (top, left, bottom or right), it will no effect on it's positioning at all, it will be exactly as it would be if you left it as position: static; But if you DO give it some other positioning attribute, say, top: 10px;, it will shift it's position 10 pixels DOWN from where it would NORMALLY be. [...]
This question already has answers here:
Difference between style = "position:absolute" and style = "position:relative"
(10 answers)
Closed 5 years ago.
I'm reading this article about position, and I don't understand why in this example the relatively positioned div is affected by the BODY, yet the absolutely positioned box ignores it? Aren't they suppose to behave the same when they are positioned inside another element?
the CSS:
body {
display: block;
margin: 8px;
}
#box_1 {
position: relative;
width: 200px;
height: 200px;
background: #ee3e64;
}
#box_2 {
position: absolute;
top: 0;
left: 100px;
width: 200px;
height: 200px;
background: #44accf;
}
Basically you have four position states, which are as follows:
static (default)
relative
fixed
absolute
The difference between relative and absolute is that relative is "relative" to itself (left:15px will pad it to the left with 15px), but absolute is relative to its parent (first non-static parent that is) and applying the same attribute (left:15px) will result in it being shifted 15px away form the left edge of the parent element.
This is actually a fascinating study and will help immensely in understanding web layout.
Here is the easy explanation of position: absolute and position: relative.
With absolute position, we can move an html element anywhere on the page.If we do not define any position element then it will take position from body element otherwise it will take it's position from the nearest defined position element.
Below is the example.
In this case, 'div2' takes the position from 'div1' element.
<div id='div1' style="position: relative; left: 100px;top: 10px;">
<h1>This is the first position element</h1>
<div id='div2' style=" position: absolute;left: 100px;top: 150px;">
<h2>This is a heading with an absolute position</h2>
</div>
</div>
In this case 'div2' takes position from body elements as no position is defined.
<div id='div1'>
<h1>This is the first position element</h1>
<div id='div2' style=" position: absolute;left: 100px;top: 150px;">
<h2>This is a heading with an absolute position</h2>
</div>
</div>
With relative position, an html elements can move from it's normal
position.Below is the example.
In this case it will move from it's postion 10px left and 10px below.
<div id='div2' style=" position: relative;left: 10px;top: 10px;">
<h2>This is a heading with an absolute position</h2>
</div>
absolute is the best for doing the page layout. it should have the top left right and bottom imported by CSS. and the relative is done without any tag from CSS
In example shown:
well, for relative there is no top/bottom/left/right for relative, so it stays where it should stay. (body has its own margin and padding defined by browser, which you can override).
for absolute, we have top and left, so it goes a little up, as it ignore any other items.
The explanations and descriptions explained above are well but for a normal person or a beginner it is difficult to understand.
Its simple.
Relative: Relative is similar to no positioning. Even if you haven,t used relative , and you make a div appear just like this:
margin-left:10px;
It would move to the left having space of 10px;
And similarly if you do like this:
position:relative;
margin-left:10px;
It would be same as no relative was used.
And if absolute is used for some other div in same sequence:
position:absolute;
margin-left:10px;
The it would move a total of 10+10=20px margin-left.
Because 10px of the second div of absolute and 10 px of relative div id is added in it.
It is similar to doing:
#div1{
float:left;
margin-left:10px;
}
#div2{
float:left;
margin-left:10px;
}