I am trying to swim in this sea of CSS and one thing that I have been trying to understand is relative/absolute positioning.
From what I understand, relative positioning positions the object relative to its regular place while absolute positioning positions the object relative to its closest relative parent.
So I wrote some CSS code to try to help me understand this and there is one thing that is confusing me:
body {
background-color: green;
}
.outerdiv {
position: relative;
background-color: red;
height: 300px;
width: 200px;
left: 100px;
top: 100px;
}
.innerdiv {
position: relative;
background-color: blue;
height: 150px;
width: 150px;
left: 400px;
display: block;
}
<div class="outerdiv">
Outerdiv
<div class="innerdiv">Innerdiv</div>
</div>
I found that when I changed the positioning of the innerdiv element to absolute, it made no difference. Shouldn't the relative positioning position the inner div 400px right of where it should be while absolute positioning positions the inner div 400px right of the outerdiv?
When you set the positioning of an element to be absolute, it takes its immediate non-static parent as reference.
In your case, the outerdiv is already non-static, so changing the positioning of innerdiv from relative to absolute makes no difference.
Related
I want to create a slider, so here is the code:
div#list_container {
position: relative;
width: 100%;
}
div#first_list {
position: absolute;
left: 0px;
top: 0px;
}
div#second_list {
position: absolute;
left: 70%;
top: 0px;
}
<div id="list_container">
<div id="first_list">
<h1>Smth</h1>
</div>
<div id="second_list" class="aim_list">
<h1>Smth</h1>
</div>
</div>
<h2>Following elements</h2>
It kinda works (I would just change left property to move them), but since parent (div#list_container) is positioned as relative, so it doesn't cover children elements, so another elements, which will go after slider are shown above it. How can I fix it?
When you change position of child elements to absolute, they are no longer relative to their parent element. Either make parent absolute while changing children's position to relative, or add height to parent.
I also highly recommend implementing this using CSS Flexbox, otherwise it will be very difficult to maintain. See if you can work with this:
#list_container {
position: absolute;
width: 100%;
display: flex;
justify-content: space-around;
}
#list_container > *{
flex-grow: 1;
}
The problem is that, since your child elements are with absolute positioning, there is nothing that actually expands the box of the parent element. To fix it, you can add height to the div#list_container, depending on your design target.
I need to make #outer1 to be fixed at the top of screen, but I cannot do it without messing up the current positions. I cannot just make #outer1 fixed, as I need it to be relative, because the divs on the insides need to be absolute positioned. What should I do instead to make #outer1 to be fixed at the top of the screen?
div {
border: 1px solid black;
}
#outer1 {
height: 100px;
position: relative;
}
#outer2 {
height: 900px;
}
#left {
display: inline-block;
}
#right {
display: inline-block;
position: absolute;
right: 0;
}
<div id='outer1'>
<div id='left'>Left</div>
<div id='right'>Right</div>
</div>
<div id='outer2'></div>
I cannot just make #outer fixed, as I need it to be relative, because the divs on the insides need to be absolute positioned.
Simply because the most common arrangement for absolutely positioned children involves a relatively positioned parent, doesn't mean that's the only way.
The rule for absolutely positioned elements is that their containing block is the nearest positioned ancestor. #outer1 with position fixed is a positioned ancestor, so it qualifies. It's just that 99% of the time people use position: relative since that has minimal impact on the parent.
There's no problem using position: fixed as a containing block for absolutely positioned children.
From MDN:
A positioned element is an element whose computed position
property is either relative, absolute, fixed or sticky. (In other words, anything other than static)
A relatively positioned element is an element whose computed
position property is relative.
An absolutely positioned element is an element whose computed
position property is absolute or fixed.
A stickily positioned element is an element whose computed
position property is sticky.
The top, right, bottom, and left properties specify the
position of positioned elements.
The absolutely positioned element is positioned relative to nearest
positioned ancestor (non static). If a positioned ancestor doesn't
exist, the initial container is used.
source:
https://developer.mozilla.org/en-US/docs/Web/CSS/position
You can still have absolutely positioned child elements in a div with fixed position, it doesn't have to be specifically relative, it just can't be static, the default value for position
body {
margin: 0;
padding: 0;
}
div {
border: 1px solid black;
}
#outer1 {
height: 100px;
position: fixed;
width: 100%;
}
#outer2 {
height: 900px;
}
#left {
display: inline-block;
}
#right {
display: inline-block;
position: absolute;
right: 0;
}
<div id='outer1'>
<div id='left'>Left</div>
<div id='right'>Right</div>
</div>
<div id='outer2'></div>
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.
As you can see in this page: http://pitchfork.com/ , there are some audio elements on the right side. I've inspected them and they seem to have absolute positioning. But if you scroll down, you'll see that they are fixed.
How can achieve this behavior? Can be an element Absolute and Fixed positioned?
This is the only way I've found: like #DreamTek said:
<div id="relative-layer">
<div id="fixed-layer">
</div>
</div>
and in the styles file:
#relative-layer {
position:relative;
}
#fixed-layer {
position: fixed;
margin-top: 10px;
margin-left: 10px;
}
because using top and right rules positions the layer relative to the window, but if using margin-top and margin-left it is positioned relative to the parent layer.
JSFIDDLE: http://jsfiddle.net/9HQ4b/1/
Create a fixed scrolling sidebar with no JavaScript and a few lines of CSS.
The fixed div in the fiddle below appears to be positioned relative to the container but this is just an illusion.
It can be achieved using percentage widths or by using fixed widths and the setting a negative margin relative to the container width.
FLUID WIDTH
.wrap {
background: #ccc;
width: 90%;
height: 1000px;
}
.fixed {
position: fixed;
top: 10px;
right: 0;
background: #333;
height: 100px;
width: 10%;
}
<div class="wrap">WRAP</div>
<div class="fixed">FIXED</div>
FIXED WIDTH
.wrap {
background: #ccc;
width: 200px;
height: 1000px;
margin: 0 auto;
}
.fixed {
position: fixed;
top: 20px;
right: 50%;
background: #333;
height: 100px;
width: 50px;
margin-right: -160px;
}
<div class="wrap">WRAP</div>
<div class="fixed">FIXED</div>
A note about CSS positioning.
FIXED
Element is always positioned relative to the screen.
ABSOLUTE
Element is positioned relative to the nearest parent container with a position attribute.
Well, the inspected element IS absolute positioned, but is placed inside a wrapper (in another parent element) - #player-modal, which is fixed positioned!
The absolute position is used inside the fixed positioned parent, so the .hud element to be just a few pixels outside the content area (same spacing in every resolution!). This way the floating is fixed to the content area, instead of depending on the resolution (using fixed positioning + using the "right: 20px;" setting).
I just forgot to mention that it's possible, because the site has fixed width and not responsive layout, adjusting to every resolution. If you plan to use this efect on site with fixed width - it will work, otherwise you could need another solution.
I hope I've explained it well! :-)
You can also use calc() to achieve this. (supported in IE9+):
.fixed {
position: fixed;
right: calc(50% - 360px);
/* Replace 360px with half of container width plus desired positioning */
}
or if you want your fixed div on the left, for instance:
.fixed {
position: fixed;
left: calc(50% - 360px);
/* Replace 360px with half of container width plus desired positioning */
}
Is it possible to position a DIV relative to another DIV? I imagine this can be done by first placing it inside of the reference DIV, and then using position: relative. However, I can't figure out how to do this without affecting the contents of the reference DIV. How can I do this properly?
See: http://jsfiddle.net/CDmGQ
First set position of the parent DIV to relative (specifying the offset, i.e. left, top etc. is not necessary) and then apply position: absolute to the child DIV with the offset you want.
It's simple and should do the trick well.
You need to set postion:relative of outer DIV and position:absolute of inner div.
Try this. Here is the Demo
#one
{
background-color: #EEE;
margin: 62px 258px;
padding: 5px;
width: 200px;
position: relative;
}
#two
{
background-color: #F00;
display: inline-block;
height: 30px;
position: absolute;
width: 100px;
top:10px;
}
You want to use position: absolute while inside the other div.
DEMO
you can use position:relative; inside #one div and position:absolute inside #two div.
you can see it