How can i position a div to the bottom of the containing div?
<style>
.outside {
width: 200px;
height: 200px;
background-color: #EEE; /*to make it visible*/
}
.inside {
position: absolute;
bottom: 2px;
}
</style>
<div class="outside">
<div class="inside">inside</div>
</div>
This code puts the text "inside" to the bottom of the page.
.outside {
width: 200px;
height: 200px;
background-color: #EEE; /*to make it visible*/
}
Needs to be
.outside {
position: relative;
width: 200px;
height: 200px;
background-color: #EEE; /*to make it visible*/
}
Absolute positioning looks for the nearest relatively positioned parent within the DOM, if one isn't defined it will use the body.
Assign position:relative to .outside, and then position:absolute; bottom:0; to your .inside.
Like so:
.outside {
position:relative;
}
.inside {
position: absolute;
bottom: 0;
}
Add position: relative to .outside. (https://developer.mozilla.org/en-US/docs/CSS/position)
Elements that are positioned relatively are still considered to be in the normal flow of elements in the document. In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements. The absolutely positioned element is positioned relative to nearest positioned ancestor. If a positioned ancestor doesn't exist, the initial container is used.
The "initial container" would be <body>, but adding the above makes .outside positioned.
Related
As you can see from the example below, .absolute_child is positioned relative to .relative_parent's padding box. How can I position it at the top of .relative_parent's content box instead? I'm willing to add extra elements (e.g. nested divs) to the HTML, as that generally seems to be what I wind up having to do for more fiddly layouts!
.relative_parent {
position: relative;
height: 100px;
padding: 30px;
background-color: green;
}
.absolute_child {
position: absolute;
top: 0px;
height: 10px;
width: 10px;
background-color: blue;
}
<div class="relative_parent">
Content box of parent starts here
<div class="absolute_child">
</div>
</div>
enter link description here
html,
body {
margin: 0;
padding: 0;
}
.div1 {
height: 500px;
position: relative;
background-color: red;
}
.div2 {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
right: -80px;
top: 0;
}
<div class="div1">
<div class="div2"></div>
</div>
dom 'div2' is a absolute positioning element,and the dom 'div1' is a relative positioning element,when I set the left property of the 'div2' to '-80px',it push off the parent dom,and let the scrollbar show,who know why....thanks to help me!
The absolute property is set relatively to the DOM's ancestor element, so -80px is outside of the first div, and therefore it's "push" out of div1.
A possible solution, is to use -80's compliment, or relative instead.
Eg. how can you get the blue child in this example to be horizontally centered relative to the viewport (ie. in the center of the page), provided that the parent must stay the same.
Other qualifications:
I don't want it to be fixed.
Suppose that distance between the parent and the left viewport is unknown.
.parent {
margin-left: 100px;
margin-top: 100px;
background: red;
position: relative;
width: 50px;
height: 50px;
}
.child {
background: blue;
position: absolute;
bottom: 100%;
}
<div class="parent">
<div class="child">
child
</div>
</div>
I am trying to make this question a SSCCE. In reality, the use case is that I have a dropup (like dropdown, expect it appears above rather than below the triggering button). I want the dropup menu to be centered.
The menu needs to be absolutely positioned, otherwise it'd get in the way of the flow of other DOM elements. And I need to position the container so that I could set bottom: 100%; on the menu so that it appears right above the triggering button.
In in this case you can use position:fixed BUT to avoid it being fixed apply a null transform to the body:
body {
transform:translate(0,0);
min-height:150vh;
}
.parent {
margin-left: 100px;
margin-top: 100px;
background: red;
position: relative;
width: 50px;
height: 50px;
}
.child {
background: blue;
position: fixed;
left:50%;
transform:translate(-50%,-100%);
}
<div class="parent">
<div class="child">
child
</div>
</div>
Up until now, I've only had to worry about positioning a child div inside a parent, in which case I was taught to do like so:
parent {
height: 300px;
width: 100%;
position: relative;
}
child {
bottom: 1px
position: absolute
}
The child here should be positioned inside, but at the bottom of the parent. So it seems to me like the key for positioning a child inside the parent is the position:relative in the parent and the position: absolute in the child.
Now I'm trying to position a child div inside the existing child div, but since it is already set to position: absolute, I'm not sure what to do. Using the example above, how would I position the second child at the bottom of the 1st child?
If an absolutely positioned element is inside a parent with either position: relative or position: absolute, it will be positioned based on location of their parent container.
<div class="parent">
<div class="child-1">
<div class="child-2"></div>
</div>
</div>
.parent {
position: relative;
width: 100px;
height: 100px;
background-color: #bbb;
}
.child-1 {
position: absolute;
bottom: 5px;
left: 5px;
width: 75px;
height: 75px;
background-color: #fff;
}
.child-2 {
position: absolute;
bottom: 5px;
left: 5px;
width: 50px;
height: 50px;
background-color: #bbb;
}
will work just fine. Here's a link to a fiddle where you can play around with the results: http://jsfiddle.net/autoboxer/3583nazg/
I am trying to align vertically a modal box. But the margin-top:50% did not work as i expect. Basically i want a square centered on another square.
<style type="text/css">
#modal {
width: 300px;
height: 300px;
z-index: 100;
background-color: red;
margin: 0 auto;
position:relative;
margin-top:50%; //problem here
}
#content {
position: absolute;
width:950px;
height: 950px;
margin: 0 auto;
background-color: green;
}
#replace {
width:950px;
height:500px;
}
</style>
<div id="replace">
<div id = "content"></div>
<div id="modal"></div>
</div>
thanks
demo
Instead of margin you need to use top:325px; for #modal
If it's not too much trouble to have the modal inside the content div, you might want to try this HTML:
<div id = "content">
<div id="modal"></div>
</div>
...with this CSS:
#modal {
width: 300px;
height: 300px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -150px;
}
#content {
position: absolute;
width: 550px;
height: 550px;
background-color: green;
}
Demo
Basically you're absolutely-positioning the modal div inside the content div, and telling it to go start at 50% from the top and 50% from the left. This will center the top-left corner of the modal, but not the div as a whole. To center the div as a whole, you then have to add a negative margin to move it back up and to the left. The amount of the negative margin is half the height/width of the modal div.
If you want to keep the same HTML, you can still accomplish the same thing using this technique, just make sure to do position: relative on your replace div so that any absolutely-position children are positioned relative to it.
Add position: relative; to your container if you want absolutely positioned elements inside it to be positioned relative to it:
#replace {
position: relative;
width: 950px;
height: 500px;
}
Then set to top value of the item you want to position. One thing to note here, your #replace div is the container here, but it's smaller than the #content div, so when you position #modal, you're going to have to give it specific pixel values to get it centered over #content.