Position a Div Fixed Vertically and Absolute Horizontally within a Position:Relative Container Div
With JQuery, use the scrollLeft() property of the document! This would work
$(window).scroll(function(event) {
$("#blue-box").css("margin-left", 400-$(document).scrollLeft());
});
See also
http://jsfiddle.net/zhQkq/9/
Good luck!
Edit: If you want it to use your preset margin-left instead of a hard-coded "400", use
$(window).scroll(function(event) {
$("#blue-box").css("margin-left", $("#blue-box").css("margin-left")-$(document).scrollLeft());
});
Position element fixed vertically, absolute horizontally
Position Fixed Element Horizontally Based Off Another Element
(Disclaimer Note: The solution offered here is not technically "absolute horizontally" as the question title stated, but did achieve what the OP originally wanted, the fixed position element to be 'X' distance from the right edge of another but fixed in its vertical scroll.)
I love these types of css challenges. As a proof of concept, yes, you can get what you desire. You may have to tweak some things for your needs, but here is some sample html and css that passed FireFox, IE8 and IE7 (IE6, of course, does not have position: fixed
).
HTML:
<body>
<div class="inflow">
<div class="positioner"><!-- may not be needed: see notes below-->
<div class="fixed"></div>
</div>
</div>
</body>
CSS (borders and all dimensions for demonstration):
div.inflow {
width: 200px;
height: 1000px;
border: 1px solid blue;
float: right;
position: relative;
margin-right: 100px;
}
div.positioner {position: absolute; right: 0;} /*may not be needed: see below*/
div.fixed {
width: 80px;
border: 1px solid red;
height: 100px;
position: fixed;
top: 60px;
margin-left: 15px;
}
The key is to not set the left
or right
at all for the horizontal on the div.fixed
but use the two wrapper divs to set the horizontal position. The div.positioner
is not needed if the div.inflow
is a fixed width, as the left margin of the div.fixed
can be set to known width of the container. However, if you desire than container to have a percentage width, then you will need the div.positioner
to push the div.fixed
to the right side of the div.inflow
first.
Edit: As an interesting side note, when I set overflow: hidden
(should one need to do that) on the div.inflow
had no effect on the fixed position div being outside the other's boundaries. Apparently the fixed position is enough to take it out of the containing div's context for overflow
.
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
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.
Can i use position: fixed vertically and and position: absolute horizontally?
I believe the only way to achieve this is to use position: fixed;
and calculate the value of left
on page load or resize by determining where the left edge of the "page" falls and then adding 35px to it. Let me know if you would like me to elaborate.
Centering position: absolute div in relative container in desktop and mobile
it is always safe to use transform to make the element center, see the following code
.child {
position: absolute;
width: 50px;
height: 50px;
background-color: red;
left: 50%;
top: 50%;
border-radius: 100%;
transform: translate(-50%,-50%);
}
when you use left and right positioning, it is always pushing div from the sides not from the center, so in order to make exactly at center transform is the easy fix.
CSS horizontal absolute position and vertical relative position
No, there's nothing like this in the latest version of CSS. Absolute positioning is all or nothing. You can't have something be absolutely positioned for its horizontal position but not its vertical.
There are a few alternatives depending on what your needs are. One way is to simply put your "after" inside your "overlap":
<div id="container">
blubb
<div id="overlap">
Content goes here.
<div id="after">
after.
</div>
</div>
</div>
If you need separate borders and background colors, simply wrap "Content goes here." in another div, like this:
<div id="container">
blubb
<div id="overlap">
<div id="before">
Content goes here.
</div>
<div id="after">
after.
</div>
</div>
</div>
You can absolutely position #overlap
and have #before
and #after
either fixed
or relative
. You need to essentially split your #overlap
styles so that some stay on #overlap
but things like background get moved to #before
.
Related Topics
How to Use Bootstrap 3 Together with Jquery Mobile
Styling Jquery UI Autocomplete
Spring Not Finding Resource Files (Css, Jsp...)
Display a Message Within the Kendo Grid When It's Empty
How to Change Text (Not Font Size) According to Screen Size in CSS
Why Do People Minify CSS and JavaScript, When We Have Gzip
Why Are CSS Keyframe Animations Broken in Vue Components with Scoped Styling
How to List All CSS Variables Names/Values Pairs from Element
How to Zoom in an Image and Center It
How to Make the Facebook Like Button's Width Automatically Resize
CSS Injection: What's the Worst That Can Happen
Calling JavaScript from Function from CSS
Blinking Fixed Header in Site with Scrolling Animation
Automatic Two Columns with CSS or JavaScript
JavaScript - Loading/Busy Indicator or Transparent Div Over Page on Event Click
How to Create and Apply CSS to JavaScript Alert