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?
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 just stumbled across something baffling:
.parent {
position:relative;
background:lime;
height: 100px;
}
.parent div {
position:absolute;
background-color: yellow;
}
<div class="parent">
Parent
<div id="test">Child</div>
</div>
Notice that the yellow "Child" rectangle is below the word "Parent". Why? The way I understand the default values for top and left are 0, so the element should position itself at the upper-left corner of the parent. In fact, if I remove the text Parent or add top: 0 to the child element, this is what happens. But why does in this case the absolutely positioned box follow the flow?
The absolute position is still anchored in the flow of the content of its parent element when position is auto (which is the default). If you move the child element to the beginning of the parent, you see what you had expected (see snippet below). You can avoid that by adding top: 0; and left: 0;
.parent {
position:relative;
background:lime;
height: 100px;
}
.parent div {
position:absolute;
background-color: yellow;
}
<div class="parent">
<div id="test">Child</div>
Parent
</div>
Ahh, finally found the answer I was looking for! Thanks to #Cbroe for pointing me in the right direction:
https://drafts.csswg.org/css21/visudet.html#abs-non-replaced-height
If all three of 'top', 'height', and 'bottom' are auto, set 'top' to the static position and apply rule number three below.
I want to center some text in a fixed height div.
I've made the following fiddle
<div style="height:180px;border:1px solid black;vertical-align:middle;">
<h1 style="vertical-align:middle;">Contact</h1>
</div>
<div style="height:180px;border:1px solid black;vertical-align:middle;">
<h2>Welcome to the</h2>
<h1>AAA</h1>
<h4>system</h4>
</div>
I've tried various options of the vertical-align:middle applying it to the different elements but it doesn't seem to work.
I did see other questions where the line-height was set to the same height as the font-size but in the second example I have multiple lines of text at different heights.
Is there a good way to do this?
Used to display table-cell
as like this
.parent{
height:180px;border:1px solid black;vertical-align:middle;
display:table-cell;
}
Demo
Don't use to inline css write a class in external css and define css
Vertical alignment always comes with some trouble. You should apply that css property only to table (td) elements and inline elements, not block elements like divs.
To position something in the middle you can use very simple solution - by using absolute positioning.
Create child block and set it's position to absolute, move it 50% from top, and set margin-top to negative value with amout equal to half of parent's height. Set your parents position to relative.
#parent {
position: relative;
height: 180px;
}
#child {
position: absolute;
top: 50%;
margin-top: -90px;
}
<div id="parent">
<div id="child">
<h1>sample</h1>
<h2>sample</h2>
</div>
</div>
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;
}
Is there any way to start drawing divs from the same point? That means if I add new div and then I add another div, they will appear above each other. Because I want to move them all together depending on the same point.
CSS:
#num1,#num2{
display : inline
position:relative;
left:50px;
}
HTML:
<div id='container'>
<div id='num1'></div>
<div id='num2'></div>
</div>
So what should I add to this code so when the browser render this code the 2 divs will be on the same place?
All statements regarding absolute positioning are correct. People failed to mention, however, that you need position: relative on the parent container.
#container {
position: relative;
}
#num1,
#num2 {
position: absolute;
left: 50px;
}
<div id='container'>
<div id='num1'>1</div>
<div id='num2'>2</div>
</div>
Depending on which element you want on top, you can apply z-indexes to your absolutely positioned divs. A higher z-index gives the element more importance, placing it on the top of the other elements:
#container {
position: relative;
}
#num1,
#num2 {
position: absolute;
left: 50px;
}
/* num2 will be on top of num1 */
#num1 {
z-index: 1;
}
#num2 {
z-index: 2;
}
<div id='container'>
<div id='num1'>1</div>
<div id='num2'>2</div>
</div>
Use z-index to position divs on top of one another:
[http://www.w3schools.com/Css/pr_pos_z-index.asp][1]
So, you'll position the divs with absolute/relative positioning and then use z-index to layer them:
http://www.w3schools.com/cssref/pr_pos_z-index.asp
Make the first one position:absolute, which should take it out of the normal flow of the page.
some help.
I believe the only way to do this is to use absolute positioning
You can use absolute positioning.
#num1,#num2{ display : inline position:absolute; left:50px;top:10px; }