Can I position an element fixed relative to parent?
Let me provide answers to both possible questions. Note that your existing title (and original post) ask a question different than what you seek in your edit and subsequent comment.
To position an element "fixed" relative to a parent element, you want position:absolute
on the child element, and any position mode other than the default or static on your parent element.
For example:
#parentDiv { position:relative; }
#childDiv { position:absolute; left:50px; top:20px; }
This will position childDiv
element 50 pixels left and 20 pixels down relative to parentDiv's position.
To position an element "fixed" relative to the window, you want position:fixed
, and can use top:
, left:
, right:
, and bottom:
to position as you see fit.
For example:
#yourDiv { position:fixed; bottom:40px; right:40px; }
This will position yourDiv
fixed relative to the web browser window, 40 pixels from the bottom edge and 40 pixels from the right edge.
Fixed position but relative to container
Short answer: no. (It is now possible with CSS transform. See the edit below)
Long answer: The problem with using "fixed" positioning is that it takes the element out of flow. thus it can't be re-positioned relative to its parent because it's as if it didn't have one. If, however, the container is of a fixed, known width, you can use something like:
#fixedContainer {
position: fixed;
width: 600px;
height: 200px;
left: 50%;
top: 0%;
margin-left: -300px; /*half the width*/
}
http://jsfiddle.net/HFjU6/1/
Edit (03/2015):
This is outdated information. It is now possible to center content of an dynamic size (horizontally and vertically) with the help of the magic of CSS3 transform. The same principle applies, but instead of using margin to offset your container, you can use translateX(-50%)
. This doesn't work with the above margin trick because you don't know how much to offset it unless the width is fixed and you can't use relative values (like 50%
) because it will be relative to the parent and not the element it's applied to. transform
behaves differently. Its values are relative to the element they are applied to. Thus, 50%
for transform
means half the width of the element, while 50%
for margin is half of the parent's width. This is an IE9+ solution
Using similar code to the above example, I recreated the same scenario using completely dynamic width and height:
.fixedContainer {
background-color:#ddd;
position: fixed;
padding: 2em;
left: 50%;
top: 0%;
transform: translateX(-50%);
}
If you want it to be centered, you can do that too:
.fixedContainer {
background-color:#ddd;
position: fixed;
padding: 2em;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Demos:
jsFiddle: Centered horizontally only
jsFiddle: Centered both horizontally and vertically
Original credit goes to user aaronk6 for pointing it out to me in this answer
Fixed position relative to parent container
The problem here is with the -webkit-transform
.
Chrome cannot render
position:fixed
on elements under a transformation.
Read here
You can try removing the transform
from .absolute
div and set a margin-left
to the .fixed
div after calculating it's parents width. in your case it's 40px
.
Example:
.absolute{
height:60px;
width: 60px;
position: absolute;
top:0;
right:0;
background: #ccc;
/* -webkit-transform: translateZ(0); */
}
.fixed{
height:20px;
width: 20px;
background: red;
position: fixed;
margin-left: 40px;
}
JSFiddle DEMO
Fixed positioned div not respecting relative positioned parent?
Any element with position: fixed;
is positioned relative to the viewport, not to the nearest ancestor with position: relative
or position: absolute
.
Use position: absolute
for the child-elements and position: relative
for the parent relative to which you want to position the child-elements.
See more on CSS positioning HERE.
CSS: Fixed position relative to parent?
This is caused by the fact that the containing div : <div class="fusion-text fusion-text-2" ....
has transform: translate3d(0,0,0);
Your fixed div now becomes connected to the transformed element. It kind of treats the transformed element as the viewport.
Will wordpress let you move it out of the containing div?
Check out this SO post answer on this topic
And this : W3C Spec
Position a div in percentage relative to parent div
You can use transform property:
.fish {
height: 320px;
width: 300px;
position: absolute;
transform-origin: center; // Here I am trying to set the origin of the div in its center.
top: 50%; // And here I am trying to center vertically the child div in the parent div.
left: 50%; // Same here but horizontally
transform: translate(-50%, -50%);
z-index: 10000;
background-color: #10121b;
}
Or you can also make your parent div flex
and use flex-wrap: wrap;
justify-content:center;
and align-items:center;
without making child absolute
Related Topics
How to Change the Time Format (12/24 Hours) of an <Input>
How to Make CSS Grid Items Take Up Remaining Space
Inserting an Image from Local Directory in Thymeleaf Spring Framework (With Maven)
Where Is the Extra Space Coming from Around This Textarea
Why Align Items Center Not Working
Why Don't Flex Items Shrink Past Content Size
How to Make a Div Not Larger Than Its Contents
Why Is the ≪Center≫ Tag Deprecated in Html
Why Position:Sticky Is Not Working When the Element Is Wrapped Inside Another One
Css Absolute Position With X Scrolling
Using Mailto to Send Email With an Attachment
How to Remove the Default Arrow Icon from a Dropdown List (Select Element)
How to View HTML File in Remote Unix Server
Bootstrap Accordion Issue With Arrow