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.
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/
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.