Let's say I've this HTML:
<div id="article">
<div id="article-text">...</div>
<div id="slogan">Best Article Is Best</div>
</div>
How do I position #slogan always at top: 100 within #article?
I've tried setting absolute and relative position on #slogan and using top: 100 but if article text is bigger than 100px then #slogan will be pushed down.
Is there a way to position an element absolutely (or is it statically?) relative to its parent, no matter what content parent has?
#article{
position: relative;
}
#slogan{
position: absolute;
top: 100px;
}
Related
This question already has answers here:
Position Relative vs Absolute?
(10 answers)
Difference between style = "position:absolute" and style = "position:relative"
(10 answers)
Closed 2 years ago.
So css positions can be relative and absolute, among other types. Also, usually the parent container is set to position: relative; , and the children is set to position: absolute; to place children relative to its parent.
So when I set the below css example, child1 will be at the bottom left corner of parent container;
.parent{
position: relative;
}
.child1{
position: absolute;
bottom: 0;
left: 0;
}
But, I am wrapping other elements in the child1 class like below, basically child1 is acting like another container relatively positioned in the parent container:
<div class="parent">
<div class='child1'>
<div class-'childOfchild1'>
<h1> Some text or button </h1>
</div>
//some other divs...
</div>
</div>
Where, childOfchild1 will have a position: absolute; so its relative to child1. However, if I turn child1 into relative, it changes its position to the parent. I also tried to set the childOfchild1 to the bottom left corner of child1, but it seems like it doesn't follow the logic I have in mind.
Can someone explain what happens to this? What happens when a relative container is placed within another relative container? Hopefully with examples. Thank you!
An element with position: relative is laid out in normal flow and then shifted from that position the distances specified by the left, right, top and bottom properties.
Ancestors with position: relative have no direct effect on it.
Elements with position: absolute are positioned with respect to the closest ancestor that has position: some-value-that-is-not-static (which includes ancestors with either position: absolute or position: relative).
Positioning is one of the spearheads of CSS. You do well to ask the question because it is not always easy to understand.
To summarize CSS positioning, from the moment you have a position different from static (the default value), your element becomes the new positioning reference for all its direct and indirect children (grandchildren).
There are different potential behaviors of a positioned element though: if we take the case of an element with an absolute position, this is how the browser will position your element:
if its direct parent is positioned (absolute or relative), it will be its positioning reference.
if its direct parent is not positioned, it will go back up to its grandparent, then to its grandparent until it finds a positioned item
otherwise it takes body as a positioning reference (the last positioned parent)
Here is a code example that illustrates some of the cases. You will find in the example squares, the smallest is also the deepest in HTML. (grandson), they all have a semi-transparent color, if it gets dark it means they are overlapping.
The code example with StackOverflow tool
.relative {
position: relative;
}
.absolute {
position: absolute;
}
/* Second */
.ex2 .child {
position: absolute;
bottom: 0;
left: 0;
}
/* Third */
.ex3 .child {
position: relative;
bottom: -10px;
left: 10px;
}
.ex3 .grandchild {
position: absolute;
bottom: 0;
left: 0;
}
/* Fourth */
.ex4 .grandchild {
position: absolute;
bottom: 0;
left: 0;
}
div {
float: left;
margin: 20px;
width: 200px;
height: 200px;
background: rgba(255, 34, 56, .25);
}
div div {
margin: 0;
width: 5em;
height: 5em;
}
div div div {
width: 2em;
height: 2em;
}
<div class=" ex1 normal">
<div class="child">
<div class="grandchild"></div>
</div>
</div>
<div class="ex2 relative">
<div class="child">
<div class="grandchild"></div>
</div>
</div>
<div class="ex3 relative">
<div class="child">
<div class="grandchild"></div>
</div>
</div>
<div class="ex4 relative">
<div class="child">
<div class="grandchild"></div>
</div>
</div>
To summarize: it's all about the question "does this positioned element have a positioned parent, if not, what is the closest positioned parent?"
Do not hesitate to ask further if you have more question.
I'll be glad to help.
Have a nice day!
relatively positioned elements are positioned relative to their normal position "normal flow", and when you adjust the position"top, left,.." it will refer to its normal position as a starting point. so when a relative container positioned inside another relative one, they will not be affected by each other
So, from some time I'm trying to do this with Bootstrap, but I can't find a working way.Maybe it's something even more simple than the things i'm trying, i don't know anymore.
https://imgur.com/uZkCChn
Please for some suggestions.Thank you.
Here are the basics of absolute positioning inside relative containers:
Relative positioned containers are relative to other elements on the page.
A relative containers margin will always go from the last element on your page, not your page as a whole.
See https://jsfiddle.net/kknfLfh5/ for an example of relative positioned elements.
div2 has a
top: 0;
property, but it's not on the upper page border rather than at the lower border of div1.
If we changed the positioning of div2 to absolute, it will look like this.
We now have an absolute positioned div that ignores it's siblings and positiones itself on page level.
With your image, you want a similiar approach. Try wrapping your image inside a wrapper div that has relative positioning. Your text should have absolute positioning like this:
Css:
.wrapper{
position: relative;
display: inline-block;
}
img{
position: relative;
height: 100%;
width: 100%;
}
h1{
position: absolute;
left: 0;
top: 0;
}
p{
position: absolute;
right: 0;
top: 10px;
}
and your html:
<div class="wrapper">
<img src="http://via.placeholder.com/350x150" />
<h1>
I am a header.
</h1>
<p>
I am text.
</p>
</div>
Check this fiddle for a working sample: https://jsfiddle.net/4osq7tqo/
This question already has answers here:
Is there anything wrong with positioning all elements relatively?
(5 answers)
Difference between static and relative positioning
(7 answers)
Closed 8 years ago.
Just like the title, why div (or p or any other elements in html) have 'position: static' as the default value? Why not 'position: relative'?
I don't see any benefit using 'position: static' in my css.
Is it safe to define all div elements in html using 'position: relative'?
EDIT:
I'm quite aware the difference between static, relative, absolute, and fixed positioning. But the main problem is why the default positioning for div or any other html elements is static? This example:
HTML
<div class="div1">
<div class="div2">
<div class="div3">
<div class="div-last"></div>
</div>
</div>
</div>
CSS
.div1 {
width: 700px;
height: 700px;
background-color: #000;
position: relative;
}
.div2 {
width: 600px;
height: 600px;
background-color: #333;
position: relative;
top: 20px;
left: 20px;
}
.div3 {
width: 500px;
height: 500px;
background-color: #777;
position: absolute;
right: 0;
top: 30px;
}
.div-last {
width: 400px;
height: 400px;
background-color: #AAA;
position: absolute;
bottom: 20px;
left: 20px;
}
shows that I don't need a single static positioning to arrange my divs as I want.
Here's a jsfiddle of the code above.
And sorry for my potato English. :D
EDIT #2:
The answer from the related question is:
"Yes, it is. If you try to position one element absolute it is positioned relatively to the closest ancestor, which has a CSS position other than static.
If every element has position:relative, this would be the direct parent.
But you might want to position the absolute element relatively to an element further up in the DOM tree or maybe absolutely on the page body."
So, I don't want/need to "position the absolute element relatively to an element further up in the DOM tree or maybe absolutely on the page body.", is there any other technical precautions that I need to know before I make all divs relative?
If position: relative was the default value, position: absolute; would no longer work as expected. That is, because position: absolute uses the closest non-static positioned element in the hierarchy as the reference. If there were no static positioned elements, all would be non-static, so position: absolute would use the parent element as the reference, and thus no longer positioning absolute, but relative to the parent element.
I'm trying to set an image size to its container size + 20px. The container size is relative and will change depending the screen size.
Usually, if I had to resize a div with a background, I'll just set it to position absolute with negatives positions values, but it seems like the img element doesn't follow the same rules. Any solution you know?
HTML:
<div>
<img />
</div>
Css:
div {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.5%;
}
div img {
position: absolute;
top: -20px;
right: -20px;
bottom: -20px;
left: -20px;
}
Remember, absolute positioning removes the element from the flow of the document and thus it's container. If you want the image to be relative to the container that it is in, then the position needs to be relative, add the size to it that is needed.
Thinking about this logically, why not actually wrap an extra div around the primary content div and give it some padding?
<div id=container>
<div id=content>
some content
</div>
</div>
Where container has the bg image and padding of 20px.
Why dont you just use calc function.
width: calc(100% + 20px);
Here is the fiddle http://jsfiddle.net/7hbq5/14/
Calc function have a good support http://caniuse.com/#search=calc
In this example:
html
<div style="width:50%;overflow:hidden">
<div id="inboxHeader">
<div id="inboxCount"><p>Earth</p></div>
</div>
</div>
css
#inboxHeader{
background-color:yellow;
height :300px;
position: relative;
}
#inboxCount{
position: absolute;
bottom: 0;
float:right;
}
Earth is in the bottom left corner. So how can I shift it to the bottom right corner?
Set right:0 instead of float:right
http://jsfiddle.net/8np2f/4/
As it's an absolutely positioned element change float:right; for right: 0px;
If it was positioned relatively then you would need to float it to the right however absolute positioning removes the element from the flow of the DOM.
One caveat however, make sure the parent element has it's position set either to relative or absolute as required, or the child element could position itself against the highest in the DOM tree that has a position set.
float-ing has no effect on absolute-ly positioned elements. Set the right attribute instead.
So, change this:
#inboxCount{
position: absolute;
bottom: 0;
float:right;
}
To this:
#inboxCount{
position: absolute;
bottom: 0px;
right: 0px;
}
HTML
<div style="width:50%;overflow:hidden">
<div id="inboxHeader">
<div id="inboxCount">
<p>Earth</p>
</div>
</div>
</div>
CSS
#inboxHeader {
background-color:yellow;
height :300px;
position: relative;
}
#inboxCount {
position: absolute;
bottom: 0;
right: 0; /* No need for float:right with absolute positioning */
}
I've update your Demo
You must add the rule right: 0 in the id inboxCount.
Here's an example: http://zip.net/brmZth
Hope this helps
Just posting a descriptive answer so it might help someone.
position property can be used to tackle this problem
<div id="outer" style="width: 400px; height: 400px; border: 1px solid red; position: relative">
<div id="inner" style="width: 200px; height: 200px; border: 2px solid yellow; right:0;bottom:0;position:absolute;">
</div>
jsfiddle to check a DEMO
If we set relative positioning on 'outer' div, any elements within 'outer' div will be positioned relative to 'outer' div. Then if we set absolute positioning on 'inner' div, we can move it to the bottom right of 'outer' div using 'right' and 'bottom' properties.
Relative :
If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document.
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.
Absolute : When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go. And a type of positioning that allows you to literally place any page element exactly where you want it.
Any element that is a child of the relatively positioned element can be absolutely positioned within that block.
References :
http://www.barelyfitz.com/screencast/html-training/css/positioning/
https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/