I understand it's possible to position:fixed a child element relative to it's parent using transform. When scrolling the document, is it possible to keep the fixed child's position relative to it's parent, rather than the document?
Demo
https://jsfiddle.net/ds0vbtbt/3/
Update: Above is a simiplied version of my problem. position:absolute: is not the solution I'm looking for.
Update:
Doesn't seem possible without JS once the initial transform is performed
Yeah you can do that with position absolute, provided the containing element is set to relative. You don't need the transform property at all.
.test {
width: 400px;
height: 400px;
border: 1px solid;
position: relative;
}
.box {
margin-top: 20px;
width: 300px;
height: 100px;
border: 1px solid red;
position: absolute;
}
Updated fiddle: https://jsfiddle.net/ds0vbtbt/1/
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
Update: position: fixed is always going to relative to the view-port - so if you change the window size it will be updated, but when scrolling it wont be. That said, Elements with transforms act as a containing block for fixed position descendants, so position:fixed under something with a transform no longer has fixed behavior. They do work when applied to the same element; the element will be positioned as fixed, and then transformed.
You are using position:fixed which fix the element with viewport.
Use position:absolute for child element to fix it with parent element.
Related
In the given code, in div.text section when I assign position: absolute then the display: block property becomes inactive and I have to set width: 100% to align the text in the center. What's the reason?
Why do I have to first set the position property to relative of the container in order to set the position of the child element to absolute? If I don't set the position: relative of the parent container then the element is positioned with respect to the body tag. Why?
body,
html {
height: 100%;
margin: 0;
}
div.first-div {
background-image: url(louis-lo-275893-unsplash.jpg);
height: 100%;
opacity: 0.7;
background-size: cover;
position: relative;
}
div.text {
position: absolute;
top: 45%;
left: 0;
display: block;
width: 100%;
text-align: center;
}
span.border {
color: cornsilk;
font-family: "Lato", sans-serif;
letter-spacing: 8px;
font-size: 50px;
background-color: black;
padding: 8px 30px;
height: 100px;
}
<body>
<div class="first-div">
<div class="text">
<span class="border">Hello</span>
</div>
</div>
</body>
Why do I have to first set the position property...
The default value of the position is static, which displays elements as they appear, or in other words: not positioned. Absolute positioning will place an element relative to its first positioned (not static) ancestor element. If nothing is positioned, the <body> or topmost element is it. That's where the need for setting parent position to relative comes from. Going from static to relative makes it "positioned" and now child object with absolute position will tie to its ancestor and not <body>. from https://www.w3schools.com/cssref/pr_class_position.asp
...I have to set width: 100% to align the text in the center. What's the reason?
When you remove position: absolute style from div.text it does not affect display:block (block, as opposed to inline, means the element doesn't "like" being next to other elements) <div>s or divisions are block elements and <span>s are inline. So setting display:block on any <div> is redundant. Setting the width to 100% makes the <div> occupy the entire line instead of a default: as little space as necessary. Not specifying width doesn't cancel text centering, it's just centered inside the <div> that fits perfectly.
1.The reason behind given width in absolute position is the default position of absolute and relative is left,top so we have to specify the width to perform any center alignment action. also no need to give display block property to the class, it's by default block, if your are performing some toggle action then you have to apply that property to any css.
When ever we are applying absolute position to child div it is necessary to assign the relative position to the parent, because of doing this we are restrict the are for absolute position action, if we are not applying position relative property to the parent, child css have some top, bottom, left, right property then it will show some where in body of html.
For better understanding of css position property please follow the attached link to understand the nature of position property.
enter link description here
I have a relative positioned div and I want to position its child using absolute positioning - easy. One question though: I was under the impression absolute positioned children dont take up any space, but if I position it right:5000px for example a huge gap appears to the right to accommodate that element.
How do I position an element as absolute say 5000px to the right from its parent without the parent expanding to take up the room to accomodate both.
Actually if you do it..the parent shouldn't get expanded.
Here's an example:
https://jsfiddle.net/0oofcd0x/1/
container{
position: relative;
background: black;
height:200px;
width: 500px;
}
.internal{
position: absolute;
background: green;
width:100px;
height:100px;
left: 800px;
}
By default, an HTML element whose position is set to "absolute" will be positioned relative to the browser's viewport.
But if one of the element's ancestors is set to a non-static position, the element will be positioned relative to that ancestor. That ancestor is the element's "offset parent".
The problem: I want to absolute-position an element relative to the viewport, but unfortunately one of its ancestors is relatively positioned, so that has become its offset parent. Since I'm modifying a 3rd-party theme, I can't move the element or remove its ancestor's relative positioning.
Using CSS or JavaScript, is it possible for me to, in effect, set or reset an element's offset parent? I understand that the DOM property [element].offsetParent is read-only, but is there some way to indirectly have the effect of setting it?
You could use Javascript to move the element. Here is the jQuery solution with prependTo() function, you could also use appendTo().
http://jsfiddle.net/6557cnew/
$(function() {
$('.absolute').prependTo('body');
});
.relative {
position: relative;
left: 50px;
top: 50px;
border: 1px solid blue;
width: 100px;
height: 100px;
}
.absolute {
position: absolute;
border: 1px solid red;
left: 0;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="relative">
relative
<div class="absolute">
absolute
</div>
</div>
You can use the value of the offset parent to move the child - just calculate the value of the child based on the rendered coordinates of the parent relative to the window.
CSS property position: fixed uses the viewport instead of the ancestor. However it's fixed on the screen when scrolling, so this may be an issue.
I've got a div that sits inside another div and it's supposed to float above all of the other content in the div, and stick to the right of the div. To achieve this I had to set the div positioning to "Absolute" since when it is set to "Relative", it pushes all of the content to the side of it.
However, when positioning is set to Absolute, the div does not position correctly and sticks to the left side of the div instead of the right, causing usability problems. The div positions correctly when using Relative positioning, but not absolute.
I have tried setting the margin-left to the width of the div but the size of the div can change depending on the template the page is using. I have tried setting the margin-right property appropriately but the div moves when the browser is resized.
Expected result: http://puu.sh/479u1.png (this uses margin-right to position it but this was done to show simpily what was expected to happen - this cannot be used due to the unexpected movements caused when the browser is resized)
Actual result: http://puu.sh/479ya.png
CSS code for the floating div:
.GBDragBoxOptions
{
position: absolute;
z-index: 99;
float: right;
width: 400px;
}
If you want to position the div to the right, then just use "right: 0px;" or something like that, in conjunction with "position: absolute;". As long as the parent div is positioned in some way (i.e. relative), that should do what you want.
Float does nothing on absolute positioned elements..
Use right: 0; instead of float: right;
It's a absolute div, so why float, use top and right
.GBDragBoxOptions
{
position: absolute;
z-index: 99;
width: 400px;
top:100px;
right: 50px;
}
I am trying to align (and stack) some images inside a bootstrap grid.
For some reason, the images aligns to the window and not the grid.
I use position:absolute which work like this (http://www.w3schools.com/):
"An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>"
Here is a jsfiddle :
http://jsfiddle.net/sbE6t/
.rings img {
position:absolute;
top: 0px;
left: 0px;
}
As you quoted, they will be absolutely positioned to the next non-static element. If no such element is found, the containing block is <html>.
Set position relative to the img's parent:
.rings {
// other styles
position: relative;
}
And it works
your wrapping element must be set to position:relative
.rings {
overfow:hidden;
height: 400px;
background: #999;
position:relative;
}