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
Set width of a Position: fixed div relative to parent div
I´m not sure as to what the second problem is (based on your edit), but if you apply width:inherit
to all inner divs, it works: http://jsfiddle.net/4bGqF/9/
You might want to look into a javascript solution for browsers that you need to support and that don´t support width:inherit
CSS position relative : width not considered
When the CSS position (in .second::before) is set to relative, the width (fixed in pixels) is not considered, only the vertical line is displayed and width is "forced by the browser" to 1 pixel.
A pseudo element is an inline element by default, setting position:relative
will not change this thus you cannot apply width and height to the element. Then the borwser is not forcing the width to 1px
, it's the border you have set that is equal to 1px
. The height also isn't working and the height of the element and the border is defined by the font property.
Increase the height and you will see that nothing will change:
.first {
background-color: #dc3545;
color: #fff;
font-size: 1.2rem;
border: 1px #ccc solid;
border-radius: 20px;
padding: 5px 10px;
margin-top: 10px;
}
.second {
background-color: #6f42c1;
color: #fff;
font-size: 1.2rem;
border: 1px #ccc solid;
border-radius: 5px;
padding: 5px 10px;
margin-top: 10px;
margin-left: 10px;
}
.second::before {
content: "";
top: -13px;
left: -30px;
border-left: 1px solid #aaa;
border-bottom: 1px solid #000;
border-radius: 0 0 0 0px;
height: 600px;
width: 50px !important;
}
<span class="first">First</span>
<span class="second">Second</span>
difference between percentage width for relative and fixed
Your div .outer1
is taking width: 50%
of its parent i.e. body
.
Whereas you div .outer2
is positioned fixed
and therefore is removed form normal document flow and will position itself with respect to viewport.
Since every browser applies default 'user agent' stylesheet which includes default margin, paddings for elements therefore width of your document differs from that of viewport, that's why there is slight difference in the widths.
You can reset default browser styles, to get the desired result.
html, body {
margin: 0;
padding: 0;
}
Creating a div whose size is relative to a fixed width div and containing area?
The following should do it:
#contentBody{
width:N%
}
#div contentLeft{
width:205px;
float:left;
}
#div contentRight{
margin-left:205px;
}
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.
set height relative to fixed element
You can use flexbox
on the body too, and remove the fixed position:
body,html { width: 100%; height: 100%; margin: 0;}
body { overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;}
.nav { padding: 5px; margin: 0; width: 100%; background-color: #84a9ca; font-size: 5vh;}
.bas { opacity: 0.5;}
.box { width: 100%; height: 100%; background-color: #6ec6e1; display: flex; justify-content: space-around;}
.element { background-color: #488a45; width: 100px;}
<!--change with the size of the window--><div class="nav haut">nav</div><!--take all the place but want it to be just between the navs--><div class="box"> <!--text and margin hidden by the nav--> <div class="element">element</div> <div class="element">element</div> <div class="element">element</div></div><!--transparent to show what's behind--><div class="nav bas">nav</div>
Related Topics
Get Child Element to Respect Parent Element Width & Height
How to Create Variable Columns and Fill Them Up
Flexbox Column Align Self to Bottom
CSS Hide All Images with Matching Src Attribute
How to Center Font Awesome Icons Horizontally
HTML Formatted Email Not Showing Up at All in Gmail But Is in Other Mail Clients
Browser Developer Tools: What Is The Position of The HTML Element
CSS: Lighten an Element on Hover
What Are Your Tips for Best Practice for Web Application Structure
Override and Reset CSS Style: Auto or None Don't Work
Statically Rotate Font-Awesome Icons
How to Create Inline Style with: Before and: After
Firefox Parsing 4 Digit Hex Color Values as Rgba