Is there any documentation that specifies what the default behaviour is for an element with position fixed, inside an element with position relative, absolute or static?
.parent {
position: relative; /* or absolute/static */
height: 200px;
width: 200px;
top: 30px;
left: 50px;
background-color: red;
}
.child {
position: fixed;
height: 100px;
width: 100px;
left: 10px;
top: 20px;
background-color: blue;
}
<div class='parent'>
<div class='child'></div>
</div>
My own experiance is that it is positioned relative to the browser viewport (unless transform is used, or left/top is omitted in child), but how can i justify that this should always will be the case? How do i know if any browsers renders this differently? Perhaps positioning the child relative to the parent, or maybe not showing the element at all...
The position of the parent element or any ancestor is irrelevant when it comes to position:fixed. From the specification:
Fixed positioning is a subcategory of absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the viewport.
But there is some special cases where the containing block can change. It happens when using filter like I explained here, transform like explained here and sometimes will-change (explained here)
Concerning the use of top/left/bottom/right you need to consider the static position. If you don't set any of those values the browser will consider the static position to place the element. Still From the specification:
For the purposes of this section and the next, the term "static position" (of an element) refers, roughly, to the position an element would have had in the normal flow. More precisely ...
A position:fixed element always consider the viewport as its containing block (the reference for its placement) unless there is some particular properties used in a upper level (transform, filter, etc). The position of that element is either defined by top/left/right/bottom or by the static position like described in the specification.
Related question to get more details about the static position: Why aren't my absolutely-positioned elements located where I expect?
Related
So, let's say we have the following code:
body {
margin: 0;
/* position: relative; */
}
.container {
width: 300px;
height: 300px;
margin: 100px;
background: gray;
}
.absolute {
width: 100px;
height: 100px;
background: red;
position: absolute;
top: 10px;
}
<div class="container">
<div class="absolute"></div>
</div>
In this case the .absolute element is positioned relative to the body, as expected.
Not let's add position: relative to the body.
The element is now positioned relative to the .container. Which doesn't make sense, as absolutely positioned element is positioned relative to nearest positioned ancestor (non-static) which is body in this case.
Is body positioning treated differently from other elements?
CODEPEN
From the specification about absolute positioning:
The containing block for a positioned box is established by the nearest positioned ancestor (or, if none exists, the initial containing block, as in our example).
Ok, you have none nearest positioned ancestors, move along to the initial containing block:
The position and size of an element's box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element. The containing block of an element is defined as follows:
The containing block in which the root element lives is a rectangle called the initial containing block. For continuous media, it has the dimensions of the viewport and is anchored at the canvas origin; it is the page area for paged media.
Good, and what is the root element in your case:
The html element represents the root of an HTML document.
It means that by default your the .absolute element is positioned not relative to the <body>, but to the <html>.
In fact, if you do not specify the position: relative, then the elements will have a position of :static ( https://www.w3schools.com/cssref/pr_class_position.asp ). You actually need to insert position relative to the .container element if you want to place .absolute depending on the container element. This is why you have the strange behavior.
I know absolute positioning breaks normal flow but since the order in HTML is absolute element first then static one, I was expecting it to be reflected in the display order too.
.absolute
{
position: absolute;
width: 100px;
height: 100px;
background-color: black;
}
.static
{
background-color: red;
height: 20px;
width: 400px;
}
<div>
<div class="absolute"></div>
<div class="static"></div>
</div>
The reason I need this is because I want to display a sliding menu (the '.absolute' div) which slides from bottom to up and appears like it's coming from the back of the '.static' div.
The container div will obviously need to have 'overflow: visible'.
Any idea how to accomplish this?
Maybe another technique is needed? Like CSS clip?
As per section 9.9.1 Specifying the stack level: the 'z-index' property of CSS 2.2:
Within each stacking context, the following layers are painted in back-to-front order:
the background and borders of the element forming the stacking context.
the child stacking contexts with negative stack levels (most negative first).
the in-flow, non-inline-level, non-positioned descendants.
the non-positioned floats.
the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
the child stacking contexts with positive stack levels (least positive first).
Third one in list is position:static and 6-th is position:absolute. I marked them for you.
Edit, based on your question edits:
In order to fix your issue (which is what you should have asked in the first place, IMHO) you need to
apply position:relative; to your .static div, bringing it to the same level with the position:absolute one. (Now the'll both be positioned).
If the one you want on top is not the last in DOM, you also need to give it a positive z-index, bigger than it's siblings'. Normally they are rendered back-to-top.
Both the answers above give the adequate explanation to the situation you are facing. Given the problem at hand you can use this solution. Just add position:relative to the static div.
.absolute
{
position: absolute;
width: 100px;
height: 100px;
background-color: black;
}
.static
{
background-color: red;
height: 20px;
width: 400px;
position: relative;
}
<div>
<div class="absolute"></div>
<div class="static"></div>
</div>
Absolute position means you can put such div anywhere, and it won’t affect or be affected by any other element in the flow.
Absolutely positioned element is completly removed from the normal flow.
To obtain the effect you want, you might use z-index and position: relative and position: absolute.
I'm new to CSS and I have a question.
First, my HTML and CSS code:
<!-- HTML CODE -->
<body>
<div id="container">Container
</div>
<div id="inner">Inner</div>
</body>
<!-- CSS CODE -->
#container {
background-color:#b6ff00;
width:500px;
height:500px;
position:relative;
}
#inner {
background-color:#ffd800;
}
With current code, the browser shows the following page:
This is expected.
But if I add this css property to #inner element position:absolute; there will be a following output:
As you can see, the #inner div, takes only that much space it needs. Why this changed with only position:absolute; property added to #inner div?
That's because when you use position: absolute; the element will take up width upto the elements defined/content it contains., cuz it just gets out of the document flow so it is block level in nature but won't take up entire horizontal space on the document, as it's just out of the flow of the document..
If you want it to be full width you need to define width: 100%; explicitly so that it will take 100% of the relative parent's width as well as the height if you declare height: 100%;
Also, make sure you always use position: absolute; with a wrapper element set to position: relative; or your element will fly out in the wild which will eventually end up taking the viewport as the last relative wrapper if you set the position of the element using top, right, bottom or left.
I've explained here in detail, that how CSS Positioning Works
Worth to note that, you make any element a position: absolute; element, it will behave as a block level element, but you need to define height and width so for example, if you turn an inline span element a position: absolute; you can define height and width without making it display: block; (Unless and until you are using display: none; initially)
position: absolute; does not behave the same as block elements.
You will need to set a width and a height for a div that is absolutely positioned.
This is fundamentally how position absolute works. Once taken out of the flow of the document it becomes an inline-block element that is absolutely positioned within the nearest element that is positioned relatively (or the top most element)
If you need it to then be a certain dimensions you can try to set widths and heights, or you can do things like
#inner {
position: absolute;
left: 0;
right: 0;
}
...which would ensure it always stuck to the left and right sides of the screen.
It's generally good practice to put things that are positioned absolutely inside of an element with "position:relative" on it, as your code stands it suggests you want your #inner element to be placed anywhere on the page, whereas if you wanted it to be of a size and position relative to #container your code should look like this:
<body>
<div id="container">
Container
<div id="inner">Inner</div>
</div>
</body>
with CSS such as:
#container {
position: relative;
}
#inner {
background-color:#ffd800; width:500px;
height:500px;
position:relative;
}
You can see your output here:-
http://jsfiddle.net/KggJd/
Let me explain a little:
Postition: relative
This will align itself in accordance with the elements found before (i.e) Prior Siblings.
You can change the position by using margin-top, margin-left, ....
Position: absolute
This will always consider from the browser's start point and won't be in accordance with anything.
Drawbacks:
You cannot consider this as the parent or anything when absolutely positioned.
You can change its position by using top, bottom, right, left.
How can get both #row1 and #row2 in the following code to be visible, one after the other vertically, as if there wasn't any absolute/relative positioning involved (though without removing the positioning properties)? I.e. having the two .row <div> to appear as "normal" block elements.
body { position:relative; min-height: 2em; width: 100%; }
.container {position:absolute;}
.row {position:relative;}
.col1, .col2 {position: absolute;}
<body>
<div class="container">
<div id="row1" class="row">
<div class="col1">Hello</div>
<div class="col2">World</div>
</div>
<div id="row2" class="row">
<div class="col1">Salut</div>
<div class="col2">le monde</div>
</div>
</div>
</body>
(Sample also available as a fiddle.)
I need the elements to have the positioning provided in the CSS rules, for reasons excluded here.
The content is programmatically dynamic; I don't know the elements' heights beforehand, so a solution can't be based on specifying an absolute length (e.g. 'px') anywhere.
Well you have some weird wishes here so let me explain you what those positions really mean in CSS and how they work, using position: relative; is just like using static position, the difference is making an element position: relative;, you will be able to use top, right, bottom and left properties, though the element will move, but physically it will be in the document flow..
Coming to position: absolute;, when you make any element position: absolute;, it gets out of the document flow, hence, it has nothing to do with any other element, so in your example
you have .col1, .col2 {position: absolute;} which are positioned absolute and since both are out of the document flow, they will overlap... Because they are already nested under position: absolute; parent i.e .container and since no width is assigned, it will take the minimal width and hence, your elements overlap, if you cannot change your CSS(which according to me doesn't make any sense why you can't change) still if you want, than you can do is this..
Demo (Without removing any of your position property) And this is really dirty
For the s characters, it will be at the top as your container element is out of the flow, and hence, no height will be considered in the document flow, unless and until you wrap that s in some element, and bring it down with, margin padding or CSS Positioning.
CSS Positions Explained
As I commented, here are few examples of how CSS Positioning actually works, to start with, there are 4 values for position property i.e static which is the default one, relative, absolute and fixed, so starting with static, nothing to learn much here, elements just stackup one below the other unless they are floated or made display: inline-block. With static positioning, top, right, bottom and left won't work.
Demo
Coming to position: relative; I've already explained you in general, it's nothing but same as static, it stacks up on other element, it is in the document flow, but you can tweak the elements position using top, right, bottom and left, physically, the element stays in the flow, only position of the element is changed.
Demo 2
Now comes absolute which generally many fails to understand, when making an element absolute it gets out of the document flow, and hence it stays independent, it has nothing to do with other elements positioning unless it's overlapped by other position: absolute element which can be fixed using z-index to change the stack level. The main thing to remember here is to have a position: relative; container so that your absolute positioned element is relative to that relative positioned element, else your element will fly out in the wild.
It's worth noting that position: absolute; element when positioned absolute; inside an absolute positioned parent element, than it is relative to that element and not relative to the grand parent element which may be positioned relative
Demo 3 (Without position: relative; container)
Demo 4 (With position: relative; container)
Last is position fixed, this is same as absolute but it flows along when you scroll, it's out of the document flow, but it scrolls, also, position: fixed; element cannot be relative to any container element having any type of position, not even relative, position fixed element is always relative to the viewport, so designers use position: absolute; when they want to have a fixed position behavior but relative to parent and tweak the top property onScroll.
Demo 5
What you want, is not possible without modifying the CSS position property. However, what you can do without touching the existing CSS, is overriding it with a more specific selector
.row .col1, .row .col2 {
position: relative;
}
See JSFiddle
when position:relative is used, the page layout will occur normally before being offset by top, left values, however position:absolute will ignore the document flow. The relative ones will work with no changes but absolute must be changed
.col1, .col2 {display:inline-block;}
http://jsfiddle.net/C4bQN/
EDIT: Depending on your circumstances, maybe you can wrap your table in an absolute positioned div then use normal document flow within the table?
<div class="absolute-wrap">
<div class="row">
<div class="col"> </div>
</div>
</div>
I have a simple problem where I have 2 divs, 1 is relative positioned. The child element is absolute positioned. This child has varying height.
The code so far:
HTML
<div id="wrap"><div id="inner"></div></div>
CSS
#wrap {
width: 100%;
background: #ccc;
position: relative;
min-height: 20px;
}
#inner {
width:30%;
background: #000;
position: absolute;
right: 0;
top: 0;
height: 200px;
}
The problem I have is that the #wrap element doesn't adjust its height to match the child element and therefor the child element hangs outside the edge of the parent. Can this be done with relative and absolute positioned elements?
I know this can be achieved with floating elements and following them with css => cleared: both, but I'd like to know if its possible with this method.
I've created a jsfiddle of this problem over here if anybody would like to help me out!
Thanks a lot.
Absolute positionned elements are outside the flow so parents can't adjust their height.
But you can simply use:
#wrap {
width: 100%; /* useless */
background: #ccc;
overflow:hidden; /* establish a new formatting context */
min-height: 20px;
}
#inner {
width:30%;
background: #000;
float:right;
}
No, you can't make a parent with position: relative adjust its height to fit a child element with position: absolute.
This is because:
In the absolute positioning model, a
box is explicitly offset with respect
to its containing block. It is removed
from the normal flow entirely (it has
no impact on later siblings). An
absolutely positioned box establishes
a new containing block for normal flow
children and absolutely (but not
fixed) positioned descendants.
However, the contents of an absolutely
positioned element do not flow around
any other boxes.
http://www.w3.org/TR/CSS21/visuren.html#absolute-positioning
If you wanted to stick with your position based code, you'd have to use JavaScript to set the height of the parent div.
Otherwise, stick to using floats if they work for your case. #MatTheCat's answer looks good to me.
Just for completeness, here's a demo of #MatTheCat's answer with height: 200px added, so you can see the parent div does adjust in height: http://jsfiddle.net/gR2wL/3/