In my long journey to update my CSS skills from the deprecated dust that they have turned into, I've been playing around with certain CSS properties —particularly z-index —I'm noticing something strange or maybe there's a certain condition.
Example:
http://jsfiddle.net/mEpgR/
The element div1's parent is cont, I've made div1's position property set to absolute, yet when I shift it, it's moving relative to its parent. I was under the impression that items set to absolute positioning are outsider regular flow and move only relative to browser port as their parent.
What am I missing?
If the fiddle link does not work, code:
CSS:
.cont {
position:relative;
height:200px;
top:200px;
left:100px;
background: green; width: 200px;
}
.div1 {
background:red;
position:absolute;
top:50px;
}
HTML:
<div class="cont">
<div class="div1">DIV1</div>
</div>
An absolute positioned element is positioned relative to the first parent element that has a position other than static. Since you have it inside a parent with relative it will be absolutely positioned relative to this parent.
You might be looking for fixed position, which is relative to browser window.
Related
When I apply relative positioning to image it doesn't going to the right. But when I use absolute positioning everything is OK. I can't seem to figure out why relative positioning doesn't work. Any help is appreciated.
img {
display: block;
position: relative;
top: 0;
right:0;
}
<img src="http://img.jgi.doe.gov/images/img-user-forum.png">
You need the elements to be displayed inline. For this set the display property to inline-block for both the images and use floats to position the second image relative to the other. I suggest reading up some good material on CSS positioning and element types.
img {
display: inline-block;
position: relative;
top: 0;
right:0;
}
.one {
display: inline-block;
position:relative;
float:right;
clear:right;
}
<img src="http://img.jgi.doe.gov/images/img-user-forum.png">
<img class="one" src="http://img.jgi.doe.gov/images/img-user-forum.png">
Relative positioning does not work with bottom or right because :
Relative positioning uses the same four positioning properties as absolute positioning. But instead of basing the position of the element upon the browser view port, it starts from where the element would be if it were still in the normal flow.
So, right would make the element offset from the original position(ie. the edge of the first image), not the edge of the container.
The use of left, top, right, bottom in relative block elements will not align the elements according to the parent relative element, BUT related to the normal element position - TO ITSELF. So top: 0 means it will move 0px from the normal position. It will stay there. Relative to left:0 means exactly the same thing - 0px distance from the normal element position.
On the other side, absolute elements relate to the parent relative element, not to the actual normal position of your img. So that's how it works and stays top right.
I understand that by setting the parent div to position:relative, if I make the position of the child absolute, than the child's position will be absolute within the parent. If I want to make the grandchild positioned absolutely within child, how would I do that, since child is already set to position:absolute? Sorry if this question is weird, any help appreciated.
HTML:
<div id="parent">
<div id="child">
<div id="grandchild"></div>
</div>
</div>
</div>
CSS:
#parent{
position:relative;
}
#child{
position:absolute;
}
#grandchild{
}
why would you need to put another div inside the child? Just absolute position that one and use z-index to layer them
You can have more than one 'position:absolute;'in nested elements without regard to the positioning of the parent element. Each time you use absolute, you set that divs position relative to the dimensions of its parent element. The parent element can be relative, absolute, or fixed (anything but static) and it should not affect its children nodes.
I mention this just so that you do not mistakenly think that the relative positioning of #parent has any bearing on the absolute positioning of #child, and the #grandchild element can be positioned as absolute OR relative, just keep in mind that you are positioning it to the dimensions of the #child, and in reference to its immediate parent.
The short answer, set #grandchild{position:absolute;} and it will work just fine.
An absolute position element is positioned relative to it's parent element (except if parent has position set to static, but it's not your case), then:
#grandchild{
position: absolute;
}
will set grandchild's position absolute in relative to child - just as you want?
This is easy, if you want to manipulate more. I made you an example of positioning.
Here is jsfiddle example:
http://jsfiddle.net/Be84P/1/
#parent{
position:relative;
height:200px;
background: blue;
}
#child{
position:absolute;
top: 20;
width:20px;
height:100px;
background: red;
}
#grandchild{
position:absolute;
bottom:0;
height: 50px;
background: yellow;
}
I believe it does vary on what type of project your working on, but layering or making a list out of it might help. z-index: in CSS, or an ordered list, in HTML.
It's my understanding that a CSS fixed position element is relative to the viewport only. However, from what I can tell, this is true except that if "left" is unspecified, it doesn't default to 0 but rather to the left edge of what would have otherwise been its container - in this case, the main div.
The HTML:
<div id="main">
<div id="fixed"></div>
<div id="content"></div>
</div >
The CSS:
#main{
width:80%;
margin-left:auto;
margin-right:auto;
}
#fixed{
position:fixed;
width:100%;
height:25px;
background:yellow;
}
#content{
width 100%;
height:300px;
background:red
}
demonstrated at http://jsfiddle.net/2dudX/99/ . If I specify left:0 the fixed element will run the width of the screen. What causes this behavior? What are the defaults if I don't specify a left, right, top or bottom?
The behavior that you are seeing is correct.
If you set position property to a value of absolute or fixed, and the offsets are not specified, then the element is positioned to the static position, that is, the position it would take with position: static.
However, the difference is that the element with position absolute/fixed is taken out of normal document flow regardless of the offset values (auto or explicitly specified).
Reference: http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width
Specifically, the section around (my paraphrase):
if 'left' and 'right' are 'auto' and 'width' is not 'auto', then set 'left' to the static position and then solve for 'right'
If you want to understand how height is affected by the offsets, see the following:
http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-height
I run into situation that when user scroll down, a part of the sidebar gets fixed position, however when I catch the position and apply fixed css to the sidebar element, it gets fixed to whole screen, not just the parent (which is sidebar)
how do I setup this correctly?
First Understand Positioning:
Fixed Positioning OR [ position:fixed ]
An element with fixed position is positioned relative to the browser window.
Relative Positioning OR [ position:relative ]
A relative positioned element is positioned relative to its normal position.
Absolute Positioning OR [ position:absolute ]
An absolute position element is positioned relative to the first parent element that has a position other than static.
So in your case your parent div should have position:relative and your child div should have position:absolute instead of position:fixed
Reference Link
From reading your question I assume you have something like this:
<div class="sidebar">
<div class="fixed" style="position: fixed;"></div>
</div>
Unfortunately as you probably know by now, top, left, right or bottom will always act relative to the browser window on positon: fixed elements.
The solution is wrapping your .fixed div with another div, and do all the positioning you have to do on that same wrapper and not on the .fixed div. Let me demonstrate:
The HTML:
<div class="sidebar">
<div class="helper">
<div class="fixed"></div>
</div>
</div>
The CSS:
.sidebar {
position: relative;
}
.helper {
position: absolute;
top: XYZ; left: ZYX; /*where XYZ and ZYX would
be the values you were
trying before to give to .fixed*/
}
.fixed {
position: fixed;
}
See it in action in this fiddle: http://jsfiddle.net/joplomacedo/T2PL5/
Make the parent position: relative then its children will use that as their reference for absolute positioning. For details see the Definition of "containing block" in the CSS 2 specs.
About fixed positioning: how can anything be fixed (which means fixed to the viewport) but still be relative to some other element, which in turn is not fixed to the viewport? This seems a contradiction to me, which is the reason why I first misunderstood your question.
This plugin is exactly what you need
<div style="background-color:#303030;height:5.5%;">
<input type="text" style="border:1px solid;
top:50px;
bottom:10px;
height:90%;
left:20px;
width:25%;
" />
Here I have a dark div bar, with an input inside it. Why doesnt the top, bottom, left work as expected?
position:absolute;
display:inline-block;
Please note:
Your div has a height of 5.5%, and inside you place an input field 50px from the top, with a height of 90%(!). That is a huge input field. It makes no sense. Use either relative or exact measurements.
The div is missing a </div>
Don't mix-up mark-up and style (css)
In order for positioning to work, you need to declare what type of positioning to use... position: absolute; position:relative; position: fixed; etc...
You need to have the position of the element declared before you can position it in your page. The position property has 4 or 5 different settings. Inherit, absolute, fixed, static, and relative. Absolute won't work, because it needs a parent element that is positioned. Static is the default, and inherit inherits. Fixed freezes the element to the browser window. When you scroll, it won't move. Relative positions it from where it's supposed to be, so I think that's the one you would want.