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/
Related
I am having trouble figuring out why an element will not stay fixed relative to it's parent in Vue. It's only relative to #app. How can I get a child element to be 100% of it's parent in Vue with a position of fixed.
HTML:
<div id="app">
<div class="parent_relative">
<div class="child_fixed"></div>
</div>
</div>
CSS:
.parent_relative{
position: relative;
width: 500px;
height: 20px;
border: 1px solid green;
}
.child_fixed{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 20px;
background-color: blue;
}
The picture below is what it looks like:
The search bar has a div around it with position fixed. It should not be on the top of the browser. It should be within the dark div that you see below it.
An element with position: fixed; is relative to the viewport, not the parent. Maybe, what you're searching for is position: absolute; which is relative to it's parent.
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>
I want a child of a div to be positioned to the left of its parent as if they were both sibling spans. That is, the child is actually completely outside of the parent.
The size of the child varies, but the parent has a fixed size.
I have tried using a combination of position: absolute with a negative margin, like so:
.parent {
display: block;
position: relative;
}
.child {
display: block;
position: absolute;
right: 0;
margin-right: -100%;
}
But that didn't work. I also tried many combinations of margins and positions, such as right: -100%, right: 0; margin-left: 100% and nothing works.
I tried using the same combination of right: 0 with a negative margin-right, instead using pixel values. While it does work, it's not ideal. I have multiple of those in my page (they are generated by code) and the size of the child always varies. Is there a CSS-only solution?
simply add left: 100% in your child element.
.parent {
position: relative;
background-color: teal;
width: 250px;
height: 250px;
}
.child {
background-color: blue;
position: absolute;
left: 100%;
width: 50px;
height: 50px;
}
<div class="parent">
<div class="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.
I have a div element wrapping other div elements like so:
<div style="overflow:hidden">
<div id="a"></div>
<div id="b"></div>
</div>
I have other css rules that manage the dimensions of the outer div. In my actual code, I want to position the div#a exactly 10 px below the outer div. However, I want div#b to still be cut off by the outer div's overflow:hidden.
What is the best way to achieve this?
Method 1
A good way to do it is by setting the overflowing element to position:fixed (which will make it ignore the parent overflow), and then positioning it relative to the parent using this technique:
.parent {
position: relative;
.fixed-wrapper {
position: absolute;
.fixed {
position: fixed;
}
}
}
One caveat is that you cannot have any of the top,right,left,bottom properties set on the fixed element (they must all be default 'auto'). If you need to adjust the position slightly, you can do so using positive/negative margins instead.
Method 2
Another trick I recently discovered is to keep the overflow:hidden element with position:static and position the overriding element relative to a higher parent (rather than the overflow:hidden parent). Like so:
http://jsfiddle.net/kv0bLpw8/
#wrapper {
width: 400px;
height: 50px;
position: relative;
z-index: 1000;
left: 0px;
top: 0px;
}
#wrapper #insideDiv {
width: 400px;
height: 50px;
overflow: hidden;
position: absolute;
z-index: 2000;
left: 0px;
top: 0px;
}
#wrapper #a {
position: absolute;
height: 30px;
width: 100px;
bottom: -40px;
z-index: 1000;
left: 0px;
}
<div id="wrapper">
<div id="a">AAA</div>
<div id="insideDiv">
<div id="b">BBB</div>
</div>
</div>
The easiest and most convenient way is to wrap your container div inside another div and set position: relative on the external div.
.outer-container {
position: relative;
height: 50px;
}
.container {
background: gray;
overflow: hidden;
height: 50px;
}
#a,
#b {
height: 100px;
width: 100%;
}
#a {
background: green;
position: absolute;
top: 60px;
}
#b {
background: red;
font-size: 60px;
}
<div class="outer-container">
<div class="container">
<div id="a"></div>
<div id="b">Cut off</div>
</div>
</div>
as people said, the element must be presented outside the parent in order to be not cropped. But you can do this with JavaScript to achieve the similar concept without having to change your actual markup:
function breakOverflow(elm) {
var top = elm.offset().top;
var left = elm.offset().left;
elm.appendTo($('body'));
elm.css({
position: 'absolute',
left: left+'px',
top: top+'px',
bottom: 'auto',
right: 'auto',
'z-index': 10000
});
}
then pass the element you want to exclude from the cropping of its parent:
breakOverflow($('#exlude-me'));