I have a container div that has relative positioning, then another div inside that also has relative positioning:
<div class="first">
<div class="second">
<img src="img.jpg" />
</div>
</div>
I would like an image with absolute positioning to be relative to the "second" div not the "first". But I need them both to have relative positioning, how do I specify so the image is relative to the "second" div?
In the page hierarchy the image would be relative to .second; however, you must define the parent to be relatively positioned for the child to care.
see: http://css-tricks.com/absolute-positioning-inside-relative-positioning/
.second { position:relative; }
.second img { position:absolute; top:0; left: 0 }
It is relative to the second <div> automatically according to the CSS standards, since it is nested in the second <div> and that div is positioned. Here is a quote from the CSS2 standard:
The containing block for a positioned box is established by the nearest positioned ancestor
So you count upwards in the DOM tree, i.e. from the nearest ancestor towards the document root, and stop at the first positioned ancestor (and if there isn't one, then it's the closest container, but that doesn't apply here). In this case, that will be div.second like you want.
.second img{ position:absolute; top:0; left:0; }
The positioning is just an example; you can change it to suit your needs.
Related
<a> is positioned relatively, while <span> is nested inside it and is positioned absolutely. Yet, <span> appears below the bottom left corner of the image, instead of appearing at top left corner of it's relative parent. I can't understand why does it not ignore it's sibling's position.
Here is my code:
.pos-rel {
position:relative;
}
.pos-abs {
position:absolute;
top:0px;
right:0px;
}
<a href="#" class="pos-rel">
<img src="http://placehold.it/270x270" class="img-responsive">
<span class="label label-primary pos-abs">Overlay</span>
</a>
Picture of an expected behavior:
It is most likely that I don't understand how position:relative and position:absolute work together in this case. Can anyone explain why the behavior illustrated on the picture is not taking place?
This is due to how the display of <a> is expressed in terms of CSS. Usually, it's display: inline. Absolute positioning works quite differently when the position: relative ancestor is an inline element:
The containing block of an element is defined as follows:
If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed', in the following way:
In the case that the ancestor is an inline element, the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element. In CSS 2.1, if the inline element is split across multiple lines, the containing block is undefined.
The inline box generated by the <a> (to contain the <img>) is the same height as the line box that it's in, and the height of the <img>, which itself is inline, is irrelevant. So the absposed element is placed at around the same height as the line box the <img> is sitting on. The <img> is positioned the way it is because it's sitting on the baseline of the <a>.
As you can imagine, setting the <a> to display: block produces the expected behavior.
<a> is inline, you must change it to block and set width or inline-block to let it assume the width of it's contents.
Included the jsfiddle to reflect what you were aiming for: https://jsfiddle.net/gq30uct4/
NEW ANSWER:
As #ISuthan Bala wrote, <a> is inline element, so you have to add your relative class to an additional DIV inside the <a> tag:
http://codepen.io/anon/pen/VaqmWN
.pos-rel {
position:relative;
}
.pos-abs {
display: block;
position:absolute;
top:0px;
left:0px;
}
<a href="#">
<div class="pos-rel">
<img src="http://placehold.it/270x270" >
<span class="label label-primary pos-abs">Overlay</span>
</div>
</a>
Is there a way to stick a div (#divA) to another div (#divB) that has left absolute position in pure CSS without javascript?
For example:
#divB {
position: absolute;
left: 100px;
}
I want that the #divA is attached to the left side of the #divB,
also if I dynamically increase the #divB left...
Update: my final objective is to manage the position of the others divs,
basing on the position of the div in the middle (div B in the picture)
staying sticked on it:
img http://www.sumoware.com/images/temp/xzpsxdkdnccotgoe.png
Just use absolute positioning with offsets of 100% to stick to the sides of the originator.
HTML:
<div id="a">
<div id="b">
</div>
<div id="c">
</div>
</div>
CSS:
div {
position:absolute;
height:50px;
width:50px;
}
#a {
left:100px;
background:red;
}
#b {
right:100%;
background:blue;
}
#c {
background:green;
left:100%;
}
Will give you exactly what you want.
Making something absolute takes it out of the normal flow. A block element gets its context from its nearest positioned ancestor(ie:fixed,absolute, or relative) element. One more thing to watch out for is inheriting unwanted margins, paddings, and borders. That being said...
According to your diagram you have a containing element, which you should use to position your 'set' of elements where you want. Putting "container -> subdivs = display:inline-block" allows you to dynamically add as many divs as you want. If something covers more than 1 element, make a class or direct it towards the children of an element. If it concerns 1 element, you may be better off with an Id. You can now absolutely position your desired sub and float the others...
Also, in order for empty divs to 'show' they must be positioned(or floating) and have a dimension.
#container{position:relative;padding:0px;margin:0px;
top:0px;left:400px;width:300px;height:105px;}
#container div{display:inline-block;}
.sub{width:100px;height:100px;padding:0;display:inline-block;}
#subA{float:left;background-color:red;}
#subB{position:absolute;left:100px;background-color:yellow;}
#subC{float:right;background-color:green;}
<div id="container">
<div id="subA" class="sub"></div>
<div id="subB" class="sub"></div>
<div id="subC" class="sub"></div>
</div>
How can you make an element that has a position: fixed display behind an element with position: static? Changing z-index doesn't seem to matter since they are not absolute.
You can use negative z-index on the fixed element.
<div id="fixed">This is fixed</div>
<div id="static">This is static</div>
#fixed {
position:fixed;
z-index:-1;
}
Fiddle Demonstration
I have some relatively positioned containers (that vary in height) and I want to display them under each other. What's happening is they are displaying on top of each other (see fiddle).
I am using position:relative on the containers because I want the child elements to have position:absolute and display relative to their container. I think there is probably a quick fix with a fixed height for example but that isn't very flexible, my containers (or their children) will vary in height.
Desired result - fiddle
Actual result - fiddle
Code:
<style type="text/css">
.outside
{
position:relative;
border:1px solid red;
}
.inside
{
position:absolute;
top:0;
left:0;
}
</style>
<div class="outside">
<div class="inside"><p>absolute 1</p></div>
</div>
<div class="outside">
<div class="inside"><p>absolute 2</p></div>
</div>
<div class="outside">
<div class="inside"><p>absolute 3</p></div>
</div>
When you position something absolute inside a relative element, this relative element won't take in consideration the width or height of the absolute element, so just add a height:30px; - DEMO -
If you do not wish to have a fixed height, then use at least a min-height. - DEMO -
The problem you are having is that your outside containers have no dimension because the inside divs are absolutely positioned.
Since you say these are variable height containers, I know of no way to fix this.
What's wrong with the 'desired result' fiddle? It seems that you are trying to recreate the default behavior of how boxes are rendered.
what is difference between relative position and absolute position is CSS
eg
.style
{
position:relative;
}
.style
{
position:absolute;
}
From W3schools:
Absolute
Generates an absolutely positioned
element, positioned relative to the
first parent element that has a
position other than static. The
element's position is specified with
the "left", "top", "right", and
"bottom" properties
Relative
Generates a relatively positioned
element, positioned relative to its
normal position, so "left:20" adds 20
pixels to the element's LEFT position
Also check this page, it will give you very nice overview about positions in CSS.
The standard describes it here: Comparison of normal flow, floats, and absolute positioning
Is there something in particular about this which you don't understand or want explaining further?
With relative you can position the element relative to its original position and the original space is still holding the item.
Absolute takes the item out of the regular flow of the HTML and you can position it relative to the parent element.
Here is a good tutorial about that:
http://jimbojw.com/wiki/index.php?title=Position_absolute_is_really_relative%3F
Use relative when you consider range to parent element or elements before.
Use absolute when you want to make an element in inviolable position.
You can also learn the difference between margin-left and left css property for relative and absolute
<html>
<body>
<div style="width:300px; height:200px; margin:auto; background:red">
<div style="position:relative; left:10px; top:20px;">
test
</div>
<div style="position:relative; left:10px; top:20px;">
test
</div>
<div style="position:absolute; left:0; bottom:0px;">
test
</div>
<div style="position:absolute; margin-left:0; margin-bottom:0px;">
test
</div>
</div>
</body>