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.
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.
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/
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.
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'));
is there a way to absolute position an inner div to the top of the page ignoring parents relative position?
Nope, unless you re-locate it in the DOM.
(using position:fixed might be an alternative if you want it to be window related instead of document related)
You can use position: absolute; and negative values:
HTML:
<div id="parent">
<div id="child">
The child's content
</div>
</div>
CSS:
#parent
{
position: relative;
top: 200px;
border: 1px dashed #f00;
height: 50px;
width: 200px;
}
#child
{
position: absolute;
top: -200px;
}
This should do it. Example for you here.