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
Related
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.
I have DIV container with relative position, and the child with absolute position.
here is my code source:
JSFIDDLE
HTML:
<div class="wrapper">
<h1>Hello</h1>
</div>
CSS
.wrapper {
background: red;
width: 100px;
height: 100px;
position: relative;
}
.wrapper h1 {
color: #333;
position: absolute;
top: 60px;
}
when I put in top 60px, the child element jump to the bottom , normally the container has a relative position so the child element should be under the container not over the container.
Please, someone can explain me why this happen ?
I hope I explained, well my question.
When you have an element with position: absolute that element is placed relatively to its closest positioned parent. A positioned element is any element with position different from static, be it relative, absolute or fixed.
In your case you have a .wrapper with position: relative and h1 inside it with position: absolute, that is why the latter is positioned 60 pixels from the top of its parent.
If you insist of the child element being below the parent, add z-index: -1 to it - http://jsfiddle.net/jt92sedr/4/
This property applies only to positioned elements.
You can check: http://www.barelyfitz.com/screencast/html-training/css/positioning/
The CSS is actually doing what you think (sort of), but there is also (in Firefox, at least) a 21 pixel top margin which pushes the "text" down a bit farther.
Add a rule to remove the top margin:
.wrapper h1 {
color: #333;
position: absolute;
margin-top: 0; /* added this */
top: 60px;
}
Try adding "margin:0; to the h1 element:
.wrapper h1 {
color: #333;
position: absolute;
top: 60px;
margin:0;
display:block;}
Its the other way around, Relative always means relative to the parent. if you want to the child to be set in relation to parent, then make it relative.
the relative in your case on parent does not mean anything.
Are you wondering why 60px from top of the div looks like 80px or 90 px? If this is your question, answer is easy. Browsers add some margin to h1, div and body elements. Simply clear that efect:
body, div, h1 {
margin: 0;
padding: 0;
}
http://jsfiddle.net/14sLb8jg/
Modern browsers, like Chrome and Firefox, are putting a 0.67em margin on top and bottom of h1 tags.
In your case declaring a margin 0 for .wrapper h1 will solve your problem.
Your code should be:
.wrapper {
background: red;
width: 100px;
height: 100px;
position: relative;
}
.wrapper h1 {
color: #333;
position: absolute;
top: 60px;
margin: 0;
}
If you are in doubt, use your browser's inspection / developer tools to find out what default stylings the browser is giving into any given element so you know which one you need to override.
Jsfiddle Example
View on Jsfiddle
This is my HTML:
<div id="mitte"><img id="img_mittig" src="tienda.png" /></div>
And this my css:
#img_mittig{ display: block; margin-left: auto;margin-right: auto;}
The img is center right, but when I try, for example, to move down the image with top: 200px;, it doesn't work. Why ?
You need to add position on your element to be able to use top.
So for example:
#img_mittig { position: relative; top: 200px; }
top:200px will only work with position:absolute or position:relative; or position:fixed
what you are trying to achieve can be achieved using margin-top:200px;
You cant move block element with no positioning with "top, left, right, bottom". Use margins and paddings. For example margin-top: 200px;
If you want move img by setting top: 200px then set position: relative for img.
I've got a div that contains a photo tiling style I've been working on. The parent div over all the photos is position:relative while the divs inside holding the photos are position:absolute
I have to use 'position:absolute` for the children to get the layout I want but the problem arises when the parent div (either .daddy or .floatcont) doesn't register with a height and appears empty.
How can I make the parent register a height so I can put content below it on the page?
Code here: http://codepen.io/jeremypbeasley/pen/iBgsp
.floatcont {
position: relative;
background: pink;
width: 90%;
margin: 5%;
}
.floatpic {
position: absolute;
width: 40%;
margin-bottom: 10vh;
}
Absolute positioned elements are removed from the flow, thus ignored by other elements. So you can't set the parents height according to an absolutely positioned element.
In your case, I have come up with one solution. Update your .sixth class like below.
.floatpic.sixth {
top: 270vh;
width: 50%;
z-index: 6;
position:relative;
}
Updated CodePen
I'm trying to achieve an image flowing out of a div. Basically, in my heading I have a fixed width of 960px, the logo image has something coming off of it, which I would like to sit outside that 960px.
Is there a nice clean method of achieving this?
The simple method of doing it (that works in most browsers), is that you make your main wrapper have position:relative, and the make the div (that you want to flow outside) have position: absolute; left: -25px; top: -25px;.
Having position:relative as the wrapper makes the position:absolute relative inside the parent container.
put your logo in fixed div and give that div a style overflow:hidden
You could also absolute positioning to achieve this. Quick example below:
http://jsfiddle.net/spacebeers/9QJ4w/1/
You can use the position property of CSS to accomplish this:
HTML:
<div><p>Some content<img src="http://placehold.it/50x50"></p></div>
CSS:
div
{
width: 100%;
height: 175px;
}
div p
{
width: 960px;
margin: 0 auto;
background-color: #333;
height: 175px;
text-indent: 20px;
}
div img
{
position: relative;
right: 140px;
}
http://jsfiddle.net/FpTDc/
Your friend will be overflow:visible.
Your containing div will have the 960px width with overflow:visible. Inside, you will have a relatively or absolutely positioned image (you will need to offset 'left' to center it)
<div>
<img src="" />
</div>
div { width:300px; height:100px; background:red; margin:100px; }
img { width:100px; height:100px; background:green; margin:-20px 0 0 -20px; }
code: http://jsfiddle.net/cSQrR/